前端部分
es6语法
<script>
{
var a =10 //全局可以使用
let b =20 //有作用范围,只能在代码 块使用
}
console.log(a)
console.log(b) //只能输出a
</script>
(1)let定义有作用范围,定义相同的变量只能定义一次
(2)const (1)常量定义不能改变,(2)一旦定义需要初始化
const pi = 3.242
(3)let user = {“name”:“lucy”,“age”:20}
let{name,age} = user
(4)声明对象
const p ={name,age}
(5)复制
let person2 = {…person1}
(6)箭头函数
var f2 = m => m
console.log(f2(8))
var f3 = (a,b) => a+b
vue 构建页面前端框架
第一步:创建html页面,使用快捷键!快速生成html代码
第二步:引入vue的js文件,类似于jquery
第三步:在html页面创建div标签,div添加id属性
第四步:编写vue代码
<script>
new Vue({
el : "#app",
data : {
message : 'hello vue!'
}
})
</script>
v-bind 单项数据绑定,一般用在标签属性里面,获取值
<h1 v-bind:title="message">
{{content}}
</h1>
v-modle 双向绑定
<div id="app">
<input type='text' v-bind:value="searchMap.keyWord"/>
<input type='text' v-model="searchMap.keyWord"/>
<p>{{searchMap.keyWord}}</p>
</div>
v-on 进行数件处理
v-on:click 表示处理鼠标点击事件,事件调用的方法定义在 vue 对象声明的 methods 节点中
<button v-on:click='search()'>查询</button>
<button @click='search'>查询</button> //一样效果
v-if 条件指令
<div id="app">
<input type="checkbox" v-model="ok"/>是否同意
<h1 v-if="ok">五月天</h1>
<h1 v-else>算了吧</h1>
</div>
v-for
<ul>
<li v-for="n in 10">{{n}}</li>
</ul>
组件可以生成标签
如果想要全局使用,生成js文件,进行引用
p 段落标签
ul 无序列表 li 列表项
ol 有序列表 li列表项
table 表格 tr 行 td单元格
axios
是独立的项目,使用axios经常和vue一起使用实现ajax操作,请求后端的接口,显示数据
new Vue({
el: '#app',
data: {//在data定义变量和初始值
userList:[]
},
created() { //页面渲染之前执行,调用方法
this.getUserList()
},
methods:{//编写具体的方法
getUserList(){
axios.get("data.json") //请求接口路径
.then(response =>{
this.userList = response.data.data.items //把数据赋值给空的数组
console.log(this.userList)
}) //执行成功执行then方法
.catch(error =>{
}) //执行失败执行catch方法 }
} })
element-ui
node.js
是Javascript的运行环境,用于执行javascript代码环境,不需要浏览器
模拟浏览器效果
在当前js的文件路径下执行 node 01.js
在vscode中打开终端,直接运行即可
npm
是node.js的包的管理工具
maven构建项目,管理jar依赖,联网下载依赖
npm类似于maven,用在前端,管理前端js依赖,联网下载js依赖
npm init 项目初始化,类似于pom文件
npm install +依赖名称 下载依赖
babel转码器
把es6代码转换成es5执行
安装 npm install – global babel -cli
创建js文件,编写es6代码
创建Babel配置文件
安装es2015转码器 npm install --save-dev babel-preset-es2015
使用命令进行转码 babel es6/01.js dist/001.js
webpack
是一个前端静态资源加载/打包工具
前端框架用vue-admin-template
根据配置文件下载依赖,使用npm install
启动项目 npm run dev
框架build目录,放的是脚本文件。
config目录,放配置文件
src目录:
- api 定义调用方法 ;
- assets 静态资源;
- components 存放额外的插件;
- icons 存放图标;
- router 路由;
- views具体的页面
前端中把系统登陆功能改造本地
进行登陆调用两个方法,login登陆操作方法返回token值,info登陆之和获得用户信息的方法返回roles name avatar。所以,创建接口两个方法实现登陆。在项目里开发接口。然后修改api文件夹login.js修改本地接口
跨域解决方式
在后端接口controller添加注释
讲师管理
(1)添加路由,router里的index.js
(2)点击某个路由,显示路由对应页面内容,在views中创建页面。
(3)在api文件夹创建tercher.js文件,定义接口地址和参数(后端的接口)
(4)在创建的vue页面中引入js文件,调用方法实现功能
(5)把请求接口获取数据在页面进行显示,使用element-ui实现
功能
分页
<!-- 分页 -->
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="getList" />
添加条件表单组件
添加清空功能:方法 表单输入项数据清空,查询所有教师信息
删除:(1)在每条记录后面添加删除按钮
(2)在按钮绑定事件
(3)在绑定事件的方法传递删除讲师的id值
添加讲师:(1)api定义接口地址
(2)在页面中进行调用
(3)跳转路由 this.$router.push({path:‘teacher/table’})
修改讲师:点击修改按钮进入表单页面,进行数据回显(根据讲师id查询数据显示)
通过路由跳转进入数据回显页面,在路由index页面添加路由
因为添加和修改都使用save页面,区别添加还是修改,只有修改得时候查询数据回显,判断路径里面是否有讲师id,有id是修改,无id,是添加