vue在最近一段时间火热起来，相比较于ng特别是ng1和rectjs， vue显得更加轻，它也迎合了前端模块化，组件化的发展趋势。当然每个人对vue的看法和观点是不经相同的。本坑由于公司项目接触学习了vuejs，用于网站前端的搭建。但是本坑总觉得没有深入学习vue，再加上本坑也想学学nodejs。所有有了想开发与网站相匹配的后台内容管理系统。这样就有机会能更加深入的学习js大法了。当然啦，只是先实现非常简单的一些功能，比如登入退出，上传更新，列表显示等。本坑以此留下学习的轨迹，方便以后再次查看，也想分享学习过程。文章有什么不足之处，欢迎留言赐教。分前端与后端，先从前端开始吧。
搭建前端环境
在搭建前端项目之前，当然必须把应该要的环境给安装好，比如nodejs。安装nodejs时npm也附带安装完成。
前端代码托管处：
<pre>
https://github.com/githubziven/font
</pre>
本坑是按照官方文档出发，通过命令行完成搭建。
传送门：
<pre>
https://cn.vuejs.org/v2/guide/installation.html#命令行工具
</pre>
<pre>
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack font
安装依赖，走你
$cd font
$ npm install
启动项目
$ npm run dev
</pre>
在指令 npm install 如果报这样的错：npm ERR! registry error parsing json。这很有可能并不是你的错。这是由于连网时出现了问题，必须换个淘宝镜像才行。网上提供下面三种方式可以解决该问题，我按第二种方式，成功：
（1）通过config命令
打开命令行，输入
<pre>
npm config set registry https://registry.npm.taobao.org
</pre>
然后通过npm info underscore 来检查是否配置成功（如果上面配置正确这个命令会有字符串response）
（2）命令行指定
<pre>
npm --registry https://registry.npm.taobao.org info underscore
</pre>
（3）编辑 ~/.npmrc 加入下面内容
<pre>
registry = https://registry.npm.taobao.org
</pre>
启动项目后，就能看到如下界面。
编辑前端登入界面
element ui是饿了么技术团队开发的，当然它也是近期开发出来特别针对vue2的适合pc端的ui。本坑之所以用它，除了特别针对vue2，它看上去也不错，里面提供的组件也非常适合管理系统使用。element ui官网传送门：
<pre>
http://element.eleme.io/#/zh-CN/component/installation
</pre>
npm安装
<pre>
npm i element-ui -S
</pre>
引入 Element
你可以引入整个 Element，或是根据需要仅引入需要的部分组件。安装官方文档就行了。
页面代码 如下所示：
<pre>
<template>
<div class="html__login">
<div class="form__login--center">
<div class="form__title--center">
ADMIN
</div>
<div class="form__content">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
<el-form-item label="登录名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
</pre>
引入vue-resoures
它用于发送ajax请求，resource服务是个非常便捷的工具，它对请求进行了少许的封装。
同样必须要安装，再引入到main.js中
指令
<pre>
npm install vue-resource
</pre>
main.js 代码如下：
<pre>
// 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 }
})
</pre>
最后构建的登录界面
前端发送请求：
<pre>
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('登录失败！')
})
}
}
</pre>
整个登录界面模块login.vue
<pre>
<template>
<div class="html__login">
<div class="form__login--center">
<div class="form__title--center">
ADMIN
</div>
<div class="form__content">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
<el-form-item label="登录名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'html__login',
data() {
var checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error('登录名不能为空！'))
} else {
callback();
}
};
var checkPass = (rule, value, callback) => {
if (value === '') {
callback(new Error('密码不能为空'));
} else {
callback();
}
};
return {
ruleForm: {
name: '',
password: '',
age: ''
},
apiUrl: 'http://localhost:3000/login',
rules: {
name: [{
validator: checkName,
trigger: 'blur'
}],
password: [{
validator: checkPass,
trigger: 'blur'
}]
}
}
},
methods: {
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('登录失败！')
})
}
}
}
</script>
<style lang="scss" scoped>
$backgroundColor:#C0C0C0;
.html__login {
position: absolute;
width: 100%;
height: 100%;
background-color: $backgroundColor;
display: flex;
justify-content: center;
align-items: center;
.form__login--center {
position: relative;
width: 500px;
height: 250px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
padding-top: 20px;
text-align: center;
margin: 0 auto;
}
.form__title--center {
padding-bottom: 20px
}
.form__content {
width: 85%
}
}
/* Form-mixin */
</style>
</pre>
好了，前端部分就是这样，发送的请求就给后台了。下篇我们就用express来响应这个登录请求
网友评论