大家新年快乐 2018事事顺利
前端技术选型
因为作为一个后端开发人员，前端都是摸索着前进，所以会写的比较简单。
选型第一步
做出原型图后，就要像用什么技术来实现这个App了，最理想的方式当然是原生的Android或者IOS了，但这两个首先就被pass掉了，因为：
对于一个开发者来说，同时开发两个客户端实在是太难了，所以，最终选择还是使用js进行开发，然后用cordova技术包装成App文件。
选型第二步
既然确定了使用js进行开发，接下来就是js框架的选择了，摆在前面的同样有很多选型，JQuery，react，ng，vue等，最终我选择了vue进行开发，原因么，也很简单：
扣除jquery之后，也只有vue的曲线最平了。并且作为国人开发的框架，目前资料也很多，还大部分都是中文的，甚至在知乎，微博上能和开发者用中文对话，还有比这个更幸福的事情么？
脚手架
- 要进行开发，首先需要安装 node.js,安装方式不再展开。
- 安装npm
- 安装脚手架 vue-cli
npm install -g vue-cli完成后输入vue，显示vue信息表示安装成功 - 创建文件夹进入后，输入
vue init webpack jtodos然后进入等待，完成后则表示安装成功。 - 进入项目：
cd jtodos注意，这里的jtodos均指的是vue项目，不要与java项目混淆。 - 安装依赖
npm i再次进入等待 - 安装完成后，继续输入
npm run dev - 待提示运行成功后，在浏览器输入localhost:8080 这时候应出现如下画面：
至此，一个vue的项目已经搭建完成。基本的目录结构如下：
而我们的开发，主要就在src目录中进行。
UI
作为一个前端渣来说，从头到尾都是自己写样式，写js的画，实在是有些强人所难。所以，选择一个UI框架是必不可少。
虽然vue是与view松耦合的，可以支持任何ui框架，但是选择一个vue相关的ui框架还是能节约自己不少的精力，经过筛选，最终我选择了MuseUi
MuseUi主要特点如下(摘自主页):
- 基于 vue2.0 开发
- 组件丰富
- 丰富的主题，支持自定义主题
- 可以很好的配合 vue 的其它插件vue-router , vue-validator 使用
- 友好的 API
安装方式为为敲入：
npm install muse-ui --save然后在main.js内引入框架：
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)至此，UI框架引入完成。
router
在一个应用中，哪怕是单页应用，也不可避免的牵扯到页面切换。如果全部用硬编码的方式切换的画，即累有容易出错，所以引入一个路由管理的框架不可避免，在vue上也没有什么好选择的，基本上都会使用vue-router，首先进行安装：
npm install vue-router --save然后同样需要在main.js里进行配置：
import Router from 'vue-router'
import router from './router' //这里是router的配置
Vue.use(Router)最终，还要在vue里载入：
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})至此，vue-router在main的部分配置完成，然后贴上router/index.js中的代码：
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/Index.vue'
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
component: Index
}
]
})这里主要对路由进行注册，注册完成之后，就可以使用name来对应不同的组件进行路由切换。
交互
一个不与服务端交互的app，不是一个好app----阿基米德
不管他有没有说过这句话，目前纯单机的app可以说基本上是没有，尤其是我们现在要制作的这个app，每个todo项更要在云端进行保存，所以与服务端的交互是必不可少的。这时候有一个网络的框架肯定是必须的了，由于尤达(vue的作者)都宣布不再更新vue-resource，而推荐使用axios，那么我也就不费心选择了，直接使用axios。
安装：
npm install axios --save配置加载：
import axios from 'axios'
axios.defaults.timeout = 5000 //超时时间
axios.defaults.baseURL = 'http://localhost:8082' //域名然后为了操作方便，进行一下赋值：
Vue.prototype.$http = axios这样就可以用:
this.$http.get(....)这种方式进行异步操作vuex
想一想一个普通的网站，比如jsp网站 列表页-->详细页，中间通过request传值，单更多的信息是存储在一个公共的区域内，比如缓存，比如数据库等，那么vue中如何做呢？
vue也很体贴的准备了一个状态管理的软件，你可以把他想象成前端的缓存，数据库，或者什么都行，只要知道他是存储一下公共状态信息的东东就可以了。
继续完成vuex的安装：
npm install vuex --save然后在项目中进行注册:
import Vuex from 'vuex'
Vue.use(Vuex)同样需要设置应该vuex的配置文件：
import store from './store'然后进入store中index.js的代码：
const state = {
}
export default new Vuex.Store({
state
})至此，前端框架目前可预见的架构已经搭建完成，接下就进行代码开发，但是在开发之前我们先回到后端。
数据模型的修改
根据原型：
我们可以看到原来设计的数据模型已经完全不符合要求了，所以我们要对数据模型进行修改。
由图一的用户认证功能可知，用户模型至少需要用户名和密码，并且我们从电影中可以看到，分男版和女版的样式，所以至少需要性别，而且在电影中还有头像等信息，所以还需要头像，但是这些信息与登录无关，所以为了管理的便利性和登录的性能，我们创建两个模型，User和UserMessage，下面是代码：
User:
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)//表示db中id的生成方式
private Integer Id;
private String name;
private String password;
private String passwordSalt;
private Date createTime;
//get...set...UserMessage
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private int userId; //User表的id
private String nickname; //昵称
private String motto=""; //格言 座右铭
private int sex=1; //1 男 0女由电影内部可知，记录项是分组的，比如影片内的禁止事项，日记等分组，所以我们先创建一个记录分组模型：
TodoGroup
@Entity(name = "todogroups")
public class TodoGroup {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String groupName;
//1 带删除线 0 不带
private Integer del;
////1 此项目组样式，暂时没有 都默认为0
private Integer style;
private Integer userId; //此项目组所属用户
private Integer isDefault;//是否为默认组(默认日记为默认组)
private String icon; //此项目组的图标
private Date createtime; //创建时间
//getter setter
}从图二图三可知，现有的todo模型内的数据线远远不够，经过考虑，可知一个记录项内所需数据应该有 标题，内容，发表时间，心情，发表地点，天气等，经过修改，新数据模型如下：
Todo
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String item; //标题
private Date createTime=new Date(); //创建时间
private Integer userId; //记录用户
private String content; //内容
private Integer groupId; //所属组
private Integer weather; //天气图标
private String weatherContent; //天气内容
private Integer mood; //心情
private Integer bookmark; //是否标记
private String address; //发布地点
private double lng; //地点坐标
private double lat; //地点坐标同时，还需要一个用于记录组织的tag模型,tag模型就比较简单了，只记录内容即可：
@Entity(name = "tags")
public class Tag {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String tagName;
private Integer userid;
private Integer tagCount;
}tag与todo关联模型略
请自行根据模型修改DB
然后根据模型设计持久层的数据库访问类，这时候就提现出jpa的好处来了，模型修改后，持久层几乎不用做任何修改，仅仅添加几个类即可。
最终持久层目录及模型层目录如下：
至此，后端的模型修改完毕，之后将进行前后端同步开发，通过webapi的方式进行数据交互。
谢谢观看。
原文地址：https://www.cnblogs.com/jiangchao226/p/8184953.html