如果你想开发一个应用(1-13)

大家新年快乐 2018事事顺利###

前端技术选型##

因为作为一个后端开发人员，前端都是摸索着前进，所以会写的比较简单。

选型第一步

做出原型图后，就要像用什么技术来实现这个App了，最理想的方式当然是原生的Android或者IOS了，但这两个首先就被pass掉了，因为：

对于一个开发者来说，同时开发两个客户端实在是太难了，所以，最终选择还是使用js进行开发，然后用cordova技术包装成App文件。

选型第二步

既然确定了使用js进行开发，接下来就是js框架的选择了，摆在前面的同样有很多选型，JQuery，react，ng，vue等，最终我选择了vue进行开发，原因么，也很简单：

扣除jquery之后，也只有vue的曲线最平了。并且作为国人开发的框架，目前资料也很多，还大部分都是中文的，甚至在知乎，微博上能和开发者用中文对话，还有比这个更幸福的事情么？

脚手架##

1. 要进行开发，首先需要安装 node.js,安装方式不再展开。
2. 安装npm
3. 安装脚手架 vue-cli npm install -g vue-cli 完成后输入vue，显示vue信息表示安装成功
4. 创建文件夹进入后，输入vue init webpack jtodos 然后进入等待，完成后则表示安装成功。
5. 进入项目：cd jtodos 注意，这里的jtodos均指的是vue项目，不要与java项目混淆。
6. 安装依赖 npm i 再次进入等待
7. 安装完成后，继续输入npm run dev
8. 待提示运行成功后，在浏览器输入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的方式进行数据交互。

谢谢观看。