Vue 内容管理系统的搭建（一）

vue在最近一段时间火热起来，相比较于ng特别是ng1和rectjs， vue显得更加轻，它也迎合了前端模块化，组件化的发展趋势。当然每个人对vue的看法和观点是不经相同的。本坑由于公司项目接触学习了vuejs，用于网站前端的搭建。但是本坑总觉得没有深入学习vue，再加上本坑也想学学nodejs。所有有了想开发与网站相匹配的后台内容管理系统。这样就有机会能更加深入的学习js大法了。当然啦，只是先实现非常简单的一些功能，比如登入退出，上传更新，列表显示等。本坑以此留下学习的轨迹，方便以后再次查看，也想分享学习过程。文章有什么不足之处，欢迎留言赐教。分前端与后端，先从前端开始吧。
搭建前端环境
在搭建前端项目之前，当然必须把应该要的环境给安装好，比如nodejs。安装nodejs时npm也附带安装完成。
前端代码托管处：

 https://github.com/githubziven/font
 

本坑是按照官方文档出发，通过命令行完成搭建。
传送门：

 https://cn.vuejs.org/v2/guide/installation.html#命令行工具
 

 
 
全局安装 vue-cli
 
 
$ npm install --global vue-cli
 
 
创建一个基于 webpack 模板的新项目
 
 
$ vue init webpack font
 
 
安装依赖，走你
 
 
$cd font
 $ npm install
 
 
启动项目
 
 
$ npm run dev
 

在指令 npm install 如果报这样的错：npm ERR! registry error parsing json。这很有可能并不是你的错。这是由于连网时出现了问题，必须换个淘宝镜像才行。网上提供下面三种方式可以解决该问题，我按第二种方式，成功：
（1）通过config命令
打开命令行，输入

 npm config set registry https://registry.npm.taobao.org
 

然后通过npm info underscore 来检查是否配置成功（如果上面配置正确这个命令会有字符串response）
（2）命令行指定

 npm --registry https://registry.npm.taobao.org info underscore
 

（3）编辑 ~/.npmrc 加入下面内容

 registry = https://registry.npm.taobao.org
 

启动项目后，就能看到如下界面。

编辑前端登入界面

element ui是饿了么技术团队开发的，当然它也是近期开发出来特别针对vue2的适合pc端的ui。本坑之所以用它，除了特别针对vue2，它看上去也不错，里面提供的组件也非常适合管理系统使用。element ui官网传送门：

 http://element.eleme.io/#/zh-CN/component/installation
 

npm安装

 npm i element-ui -S
 

引入 Element
你可以引入整个 Element，或是根据需要仅引入需要的部分组件。安装官方文档就行了。
页面代码 如下所示：

引入vue-resoures
它用于发送ajax请求，resource服务是个非常便捷的工具，它对请求进行了少许的封装。
同样必须要安装，再引入到main.js中
指令

 npm install vue-resource
 

main.js 代码如下：

 // The Vue build version to load with the import command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import VueResource from "vue-resource"
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 import App from './App'
 import router from './router'
 Vue.use(VueResource)
 Vue.use(ElementUI)/* eslint-disable no-new */
 new Vue({
 el: '#app',
 router, template: '',
 components: { App }
 })
 

最后构建的登录界面

前端发送请求：

 submitForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
 this.createUser(formName);
 } else {
 console.log('error submit!!');
 return false;
 }
 });
 },
 resetForm(formName) {
 this.$refs[formName].resetFields();
 },
 createUser(formName) {
 var jsonData = {};
 var formObj = this.$refs[formName].$children;
 for (var i = formObj.length - 2; i >= 0; i--) {
 jsonData[formObj[i].prop] = formObj[i].fieldValue;
 }
 this.checkUser(jsonData);
 },
 checkUser(jsonData) {
 var res='';
 this.$http.post(this.apiUrl, jsonData)
 .then((response) => {
 res=response.body;
 console.log(response);
 if (res.code == 1) {
 this.$message({
 message: res.message,
 type: 'success'
 });
 } else {
 this.$message.error(res.message);
 }
 }).catch((response) => {
 // response.json()
 alert('登录失败！')
 })
 }
 }
 

整个登录界面模块login.vue

好了，前端部分就是这样，发送的请求就给后台了。下篇我们就用express来响应这个登录请求