如果你想开发一个应用(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的方式进行数据交互。

谢谢观看。

推荐阅读更多精彩内容