数据库老师说bookstrap太老，太丑了。建议我们用心的框架，后端SSM的增删改查已经做完了，偶然看到一个github项目介绍了vue.js看起来界面还挺好看的。然后就想用vue.js实现前后端的分离。
一、vue.js是什么
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方介绍，然而我还是不太懂它和别的前端框架有什么区别，所以就还是一边做，一边了解吧。
二、node.js和webback
1.node.js
node.js就js的运行环境，听说node.js可以实现全栈，我试着用它搭建了服务器，看起来很简单的，几行代码就搭建出来了，但是对于各种包就完全一无所知，感觉学起来也是挺困难的，封装性比较强啊。用vue.js之前要先安装node.js.下图是node.js的安装。安装完之后npm就已经有了。输入npm就可以看到输出内容。然后我们就可以用npm安装很多依赖，下载各种包。
2.webpack
它分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用
安装过程：终端下输入
cnpm install vue-cli -g ，运行vue查看安装是否成功。运行vue init webpack vuehui (vuehui是工程名字）
执行npm install
注意：这个npm会比较慢，可以用淘宝的镜像，然后安装的使用命令cnpm install.或者也可以使用代理
前端编译器可以使用webStorm，但是感觉挺卡的。安装的时候勾选可以右键项目就可以打开webStorm
然后就可以运行项目npm run dev，出现如下界面：
三、登录界面的尝试
参考博客：https://blog.csdn.net/sxiaofang/article/details/80215575
1.安装需要的包
npm install axios -save //axios作为和后端的交互
npm install element-ui -save //界面美化的组件
安装的时候我会报错cannot find file...解决方法就把node_modules文件夹删除了，执行npm install 重新生产node_modules,之后再安装就不会出错了
2.登陆界面代码
main.js import需要的包，ui组件和css样式
import Vuefrom 'vue'
import Appfrom './App'
import routerfrom './router'
import ElementUIfrom 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip =false
/* eslint-disable no-new */
new Vue({
el:'#app',
router,
components: { App },
template:''
})
router下的index.js改变页面入口
import Vuefrom 'vue'
import Routerfrom 'vue-router'
Vue.use(Router)
const Login = resolve => require(['@/components/Login'], resolve)
export default new Router({
routes: [
{
path:'/',
name:'登录',
component:Login }]
})
创建新的组件login.vue。这个代码样式那里就不太能看懂了hh
<template>
<div class = "note" :style = "note">
<div class="loginFrame">
<el-form ref = "AccountForm" :model = "account" rules = "rules" label-position = "left" label-width = "0px" class = "demo-ruleForm login-container">
<el-tabs v-model = "activeName" @tab-click = "handleClick" class = "users">
<el-tab-pane label = "学生" name = "students">学生</el-tab-pane>
<el-tab-pane label = "教师" name = "teacher">老师</el-tab-pane>
<el-tab-pane label = "教务老师" name = "eduTeacher">教务老师</el-tab-pane>
</el-tabs>
<el-form-item prop = "username">
<el-input type = "text" v-model = "account_username" auto-complete = "off" placeholder = "请输入您的账号"></el-input></el-form-item>
<el-form-item prop = "password">
<el-input type = "password" v-model = "account_password" auto-complete = "off" placeholder = "请输入密码"></el-input></el-form-item>
<el-checkbox v-model = "checked" checked class = "remember">记住密码</el-checkbox>
<h3 class = "forgetpwd">忘记密码</h3>
<el-form-item style = "width:100%;">
<el-button type = "primary" style = "width:100%;" >登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name:'登录',
data () {
return {
logining:false,
note: {
position:'absolute',
top:'0px',
left:'0px',
width:'100%',
height:'100%',
backgroundImage:'url(' + require('../assets/bg4.jpg') +')',
backgroundSize:'100% 100%',
backgroundRepeat:'no-repeat'
},
account: {
username:'',
password:''
},
rules: {
username: [
{required:true,message:'请输入账号',trigger:'blur'}
// { validator: validaePass }
],
password: [
{required:true,message:'请输入密码',trigger:'blur'}
// { validator: validaePass2 }
]
},
checked:true
}
}
}
</script>
<style>
.login-container {
box-shadow:0 0px 8px 0 rgba(0,0,0,0.06),0 1px 0px 0 rgba(0,0,0,0.02);
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
background-clip:padding-box;
margin:180px auto;
width:350px;
padding:35px 35px 15px 35px;
background:#fff
;
border:1px solid #eaeaea;
box-shadow:0 0 25px #cac6c6;
}
</style>
3.运行结果
四、下一步任务
下一步就是先写好学籍管理系统的登录界面，然后再跟学生管理系统合并，也就是前后端衔接，貌似挺容易的，可以把vue组件打包成js，然后在html引用就可以了
