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

lovXin 发布于2019-08-22 11:19 / 3442人阅读

摘要：线上部署也不复杂，以为例把监听默认端口，定向文件。然后，我们以此为例大概讲述此项目的前后端交互方式和一些技术选型吧。前端按照默认配置是，后端微服务的做法是。登录的逻辑很简单，先做验证，发送登陆请求，执行回调。

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后端的配置和一些技术参考可以见 @大叔一枝花

GPU云服务器云服务器第一篇 CoolBlog spa single-spa

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92168.html

Spring IOC 容器源码分析 - 余下的初始化工作

摘要：简介本篇文章是容器源码分析系列文章的最后一篇文章，本篇文章所分析的对象是方法，该方法用于对已完成属性填充的做最后的初始化工作。后置处理器是拓展点之一，通过实现后置处理器接口，我们就可以插手的初始化过程。 1. 简介本篇文章是Spring IOC 容器源码分析系列文章的最后一篇文章，本篇文章所分析的对象是 initializeBean 方法，该方法用于对已完成属性填充的 bean 做最...

Alfred 2019-08-15 18:18 评论0 收藏0
记一次基于vue的spa多页签实践经验

摘要：然后类似一样我的命名是可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的仓库上查看。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装要求实现多页签,并且可以通过浏...

ispring 2019-08-26 12:13 评论0 收藏0
记一次基于vue的spa多页签实践经验

摘要：然后类似一样我的命名是可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的仓库上查看。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装要求实现多页签,并且可以通过浏...

张迁 2019-08-02 11:15 评论0 收藏0
Slog6_使用vue前端框架实现单页应用(SPA)

摘要：时间时间时间每一份有限的时间里都饱含无限的价值需要非常珍惜开发环境需要的信息官方手册，一款工具，具体内容请移步官方手册官方手册，一刻代码包管理工具，具体内容请移步官方手册官方安装手册，前端框架浏览器扩展，用于调试应用程序，下一篇进行详细介 ArthurSlog SLog-6 Year·1 Guangzhou·China July 13th 2018 showImg(https://...

FingerLiu 2019-08-26 12:19 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

happen 2019-08-02 16:00 评论0 收藏0