首先看一个完整的功能需要什么:
1、要有一套静态的前端代码, 实现一套可交互的前端页面。
2、要有一套服务端代码,完成和前端的数据传输和对数据库数据的增删改查
这就是我们接下来要写的两个工程,接下来我们就开始写前端代码需要什么
客户端
这一部分我们使用vue-cli脚手架搭建项目,用element ui作为组件库。
关于vue脚手架项目的环境配置和搭建教程可以看之前的博客。
vue官方文档见https://cn.vuejs.org/v2/guide/
element-ui官方文档见https://element.eleme.cn/#/zh-CN/component/installation
element ui官方有两种引入方式:
- npm方式
他的好处是可以更好的和webpack配合使用。
npm install element-ui --save
在main.js中引入文件
import router from './router'
import elementUI from 'element-ui'
Vue.use(elementUI)
- CDN引入
这种方式的好处是可以和官方版本保持同步。vue脚手架项目的话,在index.html的头文件中引入组件即可
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
准备好了组件和库,我们就可以先写一个静态页面,代码不赘述,直接把vue项目跑起来看效果。
用户名绑定数据:userName,密码绑定数据userPassword,登录按钮绑定login方法。
我们现在login方法里把用户输入的user