大家新年快樂 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的方式進行數據交互。
謝謝觀看。
