油腻的前端SPA——CoolBlog（第一篇）

1. 写在前面

应小鲜肉@大叔一枝花之邀，帮他完成他的大作spring-boot + redis + nginx（其实是入门level）的博客系统，前端部分就是我来写的，先简单介绍下前端技术选型：vue-cli 的常用脚手架；iview的UI框架（表单验证和后台dashboard风格很赞）；一些简单的库吧比如 moment.js,以及quill-editor这种富文本编辑器等..

2.主要功能

• 登录、登出
• 博客CRUD（后台dashboard）
• 展示页：主页、归档、分类、关于等

2.1 Vue-cli

很多博客和教程都写的很详细了，入门的朋友建议从官方文档 看起。
这里简单看看file tree吧

package 各个依赖项版本

"dependencies": {
    "axios": "^0.17.1",
    "iview": "^2.7.3",
    "moment": "^2.19.2",
    "querystring": "^0.2.0",
    "vue": "^2.5.2",
    "vue-quill-editor": "^2.3.3",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

通过vue-cli 中webpack构建成功后，简单先把开发环境跑起来吧，默认端口8080
webpack 配置大概讲一下

    dev{
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    host: '0.0.0.0', // 默认是localhost，改成0.0.0.0为了在手机访问操作
    port: 8080, // 
    autoOpenBrowser: false,//自动打开浏览器，有点烦
    errorOverlay: true,
    notifyOnErrors: true,
    ... //其他暂时先按默认的来
    }

跨域配置等下再说。
dev 差不多了，来看看build。
执行

npm run build

文件根目录下的dist就是webpack打包好的spa项目了，打开一般就是个index.html和其他静态资源文件。
注意：大多数情况，部署至线上时，只需要把dist这个文件发布（distribution）
技术选择就太多了，tomcat弄弄也行，nginx也罢（总之和后端沟通），你自己要测试这个文件可以推荐一个小插件吧chrome extensions市场里去找一个叫"200 ok"的小插件。

即插即用。

线上部署也不复杂，以nginx为例
把监听默认端口80，定向dist文件。

server {
       listen 80;
       server_name localhost;
       location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|ttf|woff|woff2|zip|css|eot|woff|tff|svg|map)$
       {
          root /CoolBlog/front-end/cool-admin/dist;
       }   
}

好了dev环境，测试环境，线上环境，基本都能用了。来说说开发时具体功能及问题吧

2.2 登录

先写个登录form吧，样式自拟。
然后，我们以此为例大概讲述此项目的前后端交互方式和一些技术选型吧。
大叔一枝花给我的api大约是这样的：

一次简单的get请求，这里无论你是吧spring部署在自己本地还是隔壁某ip下的这个接口，都是跨域的。
（前端dev按照默认配置是8080，后端微服务的做法是far away form front end。所以都必须面对跨域问题。）
dev下最简单的方法是这样的。
在webpack中配置中间件 proxyTable
教程里也比较详细了，大概思路就是自己定义一个全局字符串pattern：' /api/** '去定向于你的tageturl。
注意：

 pathRewrite: {
          '^/api': '' //为空就行
        }

接着来谈谈ajax请求。
package.json里也有看到选的是 axios这个库。总体来说，配置简单、功能齐全。

登录的逻辑很简单，先做验证，发送登陆请求，执行回调。
表单验证的库就不推荐了，iview用的是async-validate. 示例中能满足大部分的需求了。自己写的话，原则围绕着：提示友好、验证精确、ui规整。
简单的get请求

 this.$axios.get('/api/ajaxLogin', { params:
            {name: name, password: password}
            })
            .then(function(response){
            // 请执行你回调操作
            )}

登录api中回调success都要返回一个token，至于token的用途一般是作为一个令牌保存于浏览器的storage或者cookie，保障加密性和安全性。
处理token我们可以使用 vuex 啦，也算是个入门学习。
先看file tree吧

 store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── types.js

关于index.js主要来定义state，以及action,mutation,type的整合处理

const state = {
  token: window.localStorage.getItem('token'),//我存localStorage，自己看需求吧
  userid: window.localStorage.getItem('userId')
}

mutations.js 简单来说是用来更改state的，不过不能直接调用，一般是通过type中定义常量方法来改变（commit），异步改变状态用action

//type.js
export const LOGIN = 'LOGIN'
export const LOGOUT = 'LOGOUT'

//mutations.js
const mutations = {
  [types.LOGIN]: (state, data) => {
        // 更改token的值
    state.token = data
    window.localStorage.setItem('token', data)
  },
  [types.LOGOUT]: (state) => {
        // 登出时清除token
    state.token = null
    window.localStorage.removeItem('token')
  }

 //action.js
  userLogin ({ commit }, data) {
    commit(types.LOGIN, data)
    // console.log(data)
  },
  userLogout ({ commit }) {
    commit(types.LOGOUT)
  },

store中token定义好了，这样我们就能全局使用了。
例如：在登录axios的回调中

            this.$store.dispatch('userLogin', token) //异步
            // this.$store.commit(types.LOGIN, token) 同步 

这样token就存到localStorage里了，当然登出同理咯。
然后你还可以加点动画呀提示啊anyway 就是后期优化的事情了。

好了今天先到这里，以后慢慢来，项目碰到的一些坑都会更新上来。

有关java后端的配置和一些技术参考可以见 @大叔一枝花