2021Java Training
1. Front end
<img src="地址" alt="当图片消失时显示的文字" title="当光标放在图片上时显示的文字"/>
form表单：收集用户提交的数据，并提交给后台服务器
submit按钮不能有name属性
通过form表单收集数据时，如果向服务器提交数据，必须指明name属性，向服务器提交的数据格式为name为key，value为v的键值对
选择器：1.标签选择器2.类选择器3.id选择器
JavaScript的main函数写法：也叫立即执行函数，往往只会执行一次
(
function f(){
console.log(123);
}
)();
1.1Array
js排序规则：
let books=[
{
title:'bbbb',
price:12
},
{
title:'aaaa',
price:10
},
{
title:'ccc',
price:14
},
{
title:'ddd',
price:13
}
];
console.log(books);
books.sort(ruletitle);
function rule(x, y){
// sort 的排序规则函数的规则： x>y ? 1:-1;
return x.price - y.price ;
}
function ruletitle(x, y){
return x.title > y.title ? 1 : -1;
}
console.log(books);
console.log('ab' > 'ba');
Array数组的filter方法：
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
或者：
const ages = [32, 33, 16, 40];
let agesr = ages.filter(function(age){
return age>=18;
})
console.log(agesr);
forEach方法：
arr.forEach(function(item){
console.log(item);
})
map方法：类似于函数的一一对应
const arr =[1,23,4,3,45,675,465,678,65,4,6,6,7,5,8,789,56,34];
// 保持着一一对应的关系
let arrr = arr.map(function(item){
return 0
})
console.log(arrr);
reduce方法：
const arr =[1,23,4,3,45,675,465,678,65,4,6,6,7,5,8,789,56,34];
let s = arr.reduce(function(x,y){
return x + y;
})
等价于：
let s = 0;
for(var i = 0;i < arr.length;i++){
let x = arr[i];
s = s + x;
}
find方法：
let books=[
{
title:'bbbb',
price:12
},
{
title:'aaaa',
price:10
},
{
title:'ccc',
price:14
},
{
title:'ddd',
price:13
}
];
let book = books.find(function(b){
return b.title === 'aaaa';
})
console.log(book);
join方法：
将数组的数据用'-'连接起来
let s = arr.join('-')
1.2 Arrow functions
const f = function(v){
return v+v;
}
等价于：
const fx = (v)=>{
return v+v;
}
箭头函数的语法规则：
1.如果函数的形参数量为1，那么形参的小括号可以省略，否则不允许
const fx = v => {
return v+v;}
2.如果函数体只有一条语句，则大括号可以省略
const fx = v => v+v;
3.如果函数体只有一条语句，且是return，那么大括号和return都可以省略
const fx = x=>x*x;
let arr =[1,23,4,3,45,675,465,678,65,4,6,6,7,5,8,789,56,34];
let arrr = arr.filter(x => x%2==0)
let s = arr.reduce((x,y)=> x + y);
1.3DOM、GOOD
动态显示时间：
function settime() {
let h2t = document.getElementById('rest');
let now = new Date();
let s = `${
now.getHours()}:${
now.getMinutes()}:${
now.getSeconds()}`;
h2t.innerHTML = s;
}
setInterval(()=>{
settime()
},1000)
全选和反选用js实现：
<script type="text/javascript">
(()=>{
let sa = document.getElementById('sa');
sa.onclick=(event)=>{
let checked = event.target.checked;
let gids = document.getElementsByName('gids');
gids.forEach((input)=>{
input.checked = checked;
});
};
// 反选功能实现
let sa1 = document.getElementById('sa1');
sa1.onclick=( )=>{
let gids = document.getElementsByName('gids');
gids.forEach((input)=>{
input.checked = !input.checked;
});
};
})();
</script>
1.4 ES6 new features
1.函数的扩展rest参数：可以用于获取函数的多余参数
const f = (x,y,...rest)=>{
console.log(rest);
}
let sum = f(3,32,3,36,66,4)//rest=3,36,66,4
2.arguments：
const f= function(){
console.log(arguments);//输出实际参数
console.log(123);
}
f(3,32,3,6,66,4);
1.5JSON
满足JSON的共有两种：1.满足JSON语法的字符串2.满足JSON格式要求的JavaScript对象
JSON与字符串之间的转换：
JSON转换成字符串：使用JSON.stringify()
字符串转换成JSON：使用JSON.parse()
1.6 Web storage
sessionStorage、LocalStorage
setItem、getItem、removeItem
Class 1.7
在javascript中，每一个类都有一个prototype，它就是类的原型，类的所有实例共享一个原型。
2.VUE
2.1 Global components
全局组件的使用必须依赖于某个vue的实例：
<script>
Vue.component('mycom',{
template:"<h5>nihao</h5>"
})
</script>
<div id="app">
<mycom></mycom> //起作用
</div>
<mycom></mycom> //不起作用
2.2 Another way of writing global components
<template id="mytemplate">
<div>
<h2>{
{message}}</h2>
</div>
</template>
<script>
Vue.component('mycom',{
template:"#mytemplate"
})
</script>
2.3 Parent-child component communication (parent component -> child component)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<compo></compo>
</div>
<template id="tem">
<div>
<h2>父组件</h2>
<com :live="money"></com>
</div>
</template>
<script type="text/javascript">
let son = {
template:`<h5>子组件，接收到生活费：{
{live}}</h5>`,
props:['live']
}
let father = {
template: '#tem',
data(){
return{
money:1000
}
},
components:{
com:son
}
}
let vuetest = new Vue({
el:'#app',
components: {
compo:father
}
})
</script>
</body>
2.4 Parent-child component communication (child component -> parent component)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<compo></compo>
</div>
<template id="tem">
<div>
<h2>父组件</h2>
<h2>子组件给父组件：{
{
childm}}</h2>
<com @childmoney="get" :live="money"></com>
</div>
</template>
<script type="text/javascript">
let son = {
template:`
<div>
<h5>子组件，接收到生活费：{
{live}}</h5>
<button @click="send">孝敬父组件</button>
</div>
`,
props:['live'],
methods:{
send(){
this.$emit('childmoney',500)
}
}
}
let father = {
template: '#tem',
data(){
return{
money:1000,
childm:0
}
},
methods:{
get(childmoney){
this.childm=childmoney
}
},
components:{
com:son
}
}
let vuetest = new Vue({
el:'#app',
components: {
compo:father
}
})
</script>
</body>
父组件->子组件 子组件props属性接收
子组件->父组件 子组件通过$emit主动给父组件数据，父组件监听子组件传递数据的属性childmoney
注意：vue不识别驼峰命名法，需要都用小写
2.5 Configuration and use of routing and redirection
<body>
<div id="app">
<h2>东软云医院</h2>
<hr>
<router-link to="/register">窗口挂号</router-link>
<router-link to="/exit">窗口退号</router-link>
<!--路由出口-->
<router-view></router-view>
</div>
<script>
//1.定义组件实例
let register = {
template:`<div><h3>窗口挂号</h3></div>`
}
let exit = {
template:`<div><h3>窗口退号</h3></div>`
}
let welcome = {
template: `<div><img src="../img/2.jpg"></div>`
}
//2.定义路由规则
const routes = [
{
path: '/',
redirect: '/welcome'
},
{
path: '/register',
name: 'register',
component: register
},
{
path: '/exit',
name: 'exit',
component: exit
},
{
path: '/welcome',
name: 'welcome',
component: welcome
}
]
//3.创建路由的实例，识别路由规则的配置
const router = new VueRouter({
routes: routes
})
//4.将路由对象挂载到vue实例上，让当前整个页面都能进行路由的识别和访问
let vuetest = new Vue({
el:"#app",
data:{
},
router
})
</script>
</body>
2.6 Routing nesting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h2>东软云医院</h2>
<hr>
<router-link to="/register">挂号收费</router-link>
<router-link to="/doctor">门诊医生</router-link>
<!--路由出口-->
<router-view></router-view>
</div>
<template id="register">
<div>
<p>窗口挂号>></p>
<router-link to="/register/exit">窗口退号</router-link>
<router-view></router-view>
</div>
</template>
<template id="doctor">
<div>
<p>门诊医生>></p>
<router-link to="/doctor/login">看诊记录</router-link>
<router-view></router-view>
</div>
</template>
<script>
//1.定义组件实例
let register = {
template:'#register'
}
let doctor = {
template:'#doctor'
}
let welcome = {
template: `<div><img src="../img/2.jpg"></div>`
}
let exit = {
template: `<div><p>窗口退号222</p></div>`
}
let login = {
template: `<div><p>看诊记录222</p></div>`
}
//2.定义路由规则
const routes = [
{
path: '/',
redirect: '/welcome'
},
{
path: '/register',
name: 'register',
component: register,
children: [
{
path: '/register/exit',
name: 'exit',
component: exit
}
]
},
{
path: '/doctor',
name: 'doctor',
component: doctor,
children: [
{
path: '/doctor/login',
name: 'login',
component: login
}
]
},
{
path: '/welcome',
name: 'welcome',
component: welcome
}
]
//3.创建路由的实例，识别路由规则的配置
const router = new VueRouter({
routes: routes
})
//4.将路由对象挂载到vue实例上，让当前整个页面都能进行路由的识别和访问
let vuetest = new Vue({
el:"#app",
data:{
},
router
})
</script>
</body>
</html>
2.7 Routing parameter passing
query get 明文，不安全，快，数据大小<=255byte
params post 加密，安全，慢，数据大小没有上限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h2>东软云医院</h2>
<hr>
<router-link :to="{name:'register',params:{rid:'123456'}}">窗口挂号</router-link>
<router-link :to="{path:'/exit',query:{eid:'222222'}}">窗口退号</router-link>
<!--路由出口-->
<router-view></router-view>
</div>
<script>
//1.定义组件实例
let register = {
template:`<div><h3>{
{$route.params.rid}}窗口挂号</h3></div>`
}
let exit = {
template:`<div><h3>{
{$route.query.eid}}窗口退号</h3></div>`
}
let welcome = {
template: `<div><img src="../img/2.jpg"></div>`
}
//2.定义路由规则
const routes = [
{
path: '/',
redirect: '/welcome'
},
{
path: '/register',
name: 'register',
component: register
},
{
path: '/exit',
name: 'exit',
component: exit
},
{
path: '/welcome',
name: 'welcome',
component: welcome
}
]
//3.创建路由的实例，识别路由规则的配置
const router = new VueRouter({
routes: routes
})
//4.将路由对象挂载到vue实例上，让当前整个页面都能进行路由的识别和访问
let vuetest = new Vue({
el:"#app",
data:{
},
router
})
</script>
</body>
</html>
2.8 Jump of logic control routing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h2>东软云医院</h2>
<hr>
<router-link to="/register">窗口挂号</router-link>
<router-link to="/exit">窗口退号</router-link>
<!--路由出口-->
<router-view></router-view>
</div>
<template id="login">
<div>
<form>
账号：<input type="text" v-model="user.id"><br>
密码：<input type="password" v-model="user.pwd"><br>
<button @click="checkLogin">登录</button>
</form>
</div>
</template>
<script>
//1.定义组件实例
let register = {
template:`<div><h3>窗口挂号</h3></div>`
}
let exit = {
template:`<div><h3>窗口退号</h3></div>`
}
let welcome = {
template: `<div><img src="../img/2.jpg"></div>`
}
let login = {
template: '#login',
data(){
return{
user:{
}
}
},
methods:{
checkLogin(){
if(this.user.id=="admin"&&this.user.pwd=="123456"){
alert("正确")
this.$router.push("/welcome")
}else{
alert("错误")
}
}
}
}
//2.定义路由规则
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/register',
name: 'register',
component: register
},
{
path: '/exit',
name: 'exit',
component: exit
},
{
path: '/welcome',
name: 'welcome',
component: welcome
},
{
path: '/login',
name: 'login',
component: login
}
]
//3.创建路由的实例，识别路由规则的配置
const router = new VueRouter({
routes: routes
})
//4.将路由对象挂载到vue实例上，让当前整个页面都能进行路由的识别和访问
let vuetest = new Vue({
el:"#app",
data:{
},
router
})
</script>
</body>
</html>
2.9 Routed Navigation Guards
作用：在路由跳转前完成一些校验
路由实例.beforeEach((to,from,next)=>{})
to:目标路由
from:当前路由
next:函数，表示继续执行路由跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h2>东软云医院</h2>
<hr>
<router-link to="/register">窗口挂号</router-link>
<router-link to="/exit">窗口退号</router-link>
<!--路由出口-->
<router-view></router-view>
</div>
<template id="login">
<div>
<form>
账号：<input type="text" v-model="user.id"><br>
密码：<input type="password" v-model="user.pwd"><br>
<button @click="checkLogin">登录</button>
</form>
</div>
</template>
<script>
//1.定义组件实例
let register = {
template:`<div><h3>窗口挂号</h3></div>`
}
let exit = {
template:`<div><h3>窗口退号</h3></div>`
}
let welcome = {
template: `<div><img src="../img/2.jpg"></div>`
}
let login = {
template: '#login',
data(){
return{
user:{
}
}
},
methods:{
checkLogin(){
if(this.user.id=="admin"&&this.user.pwd=="123456"){
//将登录成功信息存储成一个标识
sessionStorage.setItem("isLogin","true")
alert("正确")
this.$router.push("/welcome")
}else{
sessionStorage.setItem("isLogin","false")
alert("错误")
}
}
}
}
//2.定义路由规则
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/register',
name: 'register',
component: register
},
{
path: '/exit',
name: 'exit',
component: exit
},
{
path: '/welcome',
name: 'welcome',
component: welcome
},
{
path: '/login',
name: 'login',
component: login
}
]
//3.创建路由的实例，识别路由规则的配置
const router = new VueRouter({
routes: routes
})
//4.将路由对象挂载到vue实例上，让当前整个页面都能进行路由的识别和访问
let vuetest = new Vue({
el:"#app",
data:{
},
router
})
//路由导航的前置守卫
router.beforeEach(function (to,from,next) {
//确定守卫的路由列表
const list = ['/register','/exit']
if(list.indexOf(to.path)>=0){
//判断是否登录 来确定路由是否跳转
let str = sessionStorage.getItem("isLogin")
console.log(str+"登陆状态标识")
if (str==null||str=="false"){
console.log("非法访问")
//非法访问 应该拦截
router.push("/login")
location.reload()
}
}
next()
})
</script>
</body>
</html>
2.10 VUE Scaffolding
启动服务器：npm run serve
下面是vue+element上课代码
<template>
<div class="about">
<el-button @click="getData">获取数据</el-button>
<el-button @click="delSelectRows">批量删除</el-button>
<el-button @click="InsertdialogVisible=true">添加数据</el-button>
<el-table
:data="subNews"
style="width: 60%"
@selection-change="hsc">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="index"
label="编号">
</el-table-column>
<el-table-column
prop="word"
label="内容">
</el-table-column>
<el-table-column
label="编辑">
<template slot-scope="scope">
<el-button @click="doUpdate(scope.row)" icon="el-icon-edit">修改</el-button>
<el-button @click="delRow(scope.$index)" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
:page-size="pageSize"
layout="prev, pager, next"
:total="news.length"
@current-change="dopaging">
</el-pagination>
<el-dialog
title="修改信息"
:visible.sync="dialogVisible"
width="30%">
<el-form label-width="80px">
<el-form-item label="编码">
<el-input disabled="true" v-model="updateRow.index"></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input v-model="updateRow.word"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="dialogVisible=false">提交</el-button>
<el-button @click="dialogVisible=false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 添加对话框 -->
<el-dialog
title="添加信息"
:visible.sync="InsertdialogVisible"
width="30%">
<el-form label-width="80px">
<el-form-item label="编码">
<el-input v-model="InsertRow.index"></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input v-model="InsertRow.word"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="doInsert">提交</el-button>
<el-button @click="dialogVisible=false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
InsertdialogVisible: false,
msg: "askdjf",
news: [],
subNews: [],
delArr: [],
pageSize: 3,
currPage: 1,
updateRow: {
},
InsertRow: {
}
}
},
methods: {
doInsert() {
this.news.unshift(this.InsertRow)
this.InsertRow = {
}
this.dopaging(1)
this.InsertdialogVisible = false
},
doUpdate(row) {
this.updateRow = row
this.dialogVisible = true
},
dopaging(currPage) {
this.currPage = currPage //将当前选择的页码存储到vue的全局变量里
//根据当前页进行分页
//currpage pageSize start end
// 1 2 0 2 0,1
// 2 2 2 4 2,3
//3 ...
let start = (currPage - 1) * this.pageSize
let end = currPage * this.pageSize
this.subNews = this.news.slice(start, end)
},
delSelectRows() {
// for (let i in this.delArr){
// let dr = this.delArr[i]
// console.log(dr)
// for (let j in this.news){
// if (dr.index==this.news[j].index){
// this.news.splice(j,1)
// }
// }
// }
//自己写的
for (let i in this.delArr) {
if (this.news.indexOf(this.delArr[i]) != -1) {
this.news.splice(this.news.indexOf(this.delArr[i]), 1)
}
}
this.dopaging(this.currPage)
},
delRow(index) {
console.log(index + ">>>>>>>>>>>>>.")
//this.news.splice(index,1)
let r = this.subNews.splice(index, 1) //从数据表格中正在显示的数据中删除
//将数据从news中删除
for (let i in this.news) {
if (this.news[i].index == r[0].index) {
this.news.splice(i, 1)
}
}
this.dopaging(this.currPage) //删除成功后，重新分页
},
hsc(arr) {
this.delArr = arr
},
getData() {
//通过axios框架，获取服务器数据--天行数据
let key = "b68ac6fd1f3caadc294512b5e24a5bf7"
this.$axios.get("http://api.tianapi.com/wxhottopic/index?key=" + key).then((res) => {
console.log(res.data.newslist)
this.news = res.data.newslist
this.dopaging(1)
})
}
}
}
</script>
<style>
.el-table {
margin: 0 auto;
}
</style>
2.11VUEX
store文件下的index.js存放可以被全局访问的数据
export default new Vuex.Store({
state: {
num: 1000
},
getters: {},
mutations: {
num(state, r) {
state.num = r
}
},
actions: {},
modules: {}
})
访问方式：{
{$store.state.num}}
修改方式：this.$store.commit('num',1)
3.Git
1.云端仓库
a.在码云上创建云仓库
b.在本地生成公钥，与远程仓库进行识别配置
git config --global user.name "zzy"
git config --global user.email "[email protected]"
ssh-keygen -t rsa -C "[email protected]"
回车三次，生成公钥
把公钥复制 配置到码云-管理-公钥
c.本地仓库和远程仓库的关联
git remote add origin ssh
git remote add origin [email protected]:vivi_inno/zzy.git
d.注意!
第一次本地仓库和云端仓库对接，必须先拉取再推送
除了第一次，以后都是直接推送即可
拉取命令： git pull --rebase origin master
2.本地仓库
a.初始化本地仓库 git init
b.将文件添加到本地仓库
git add 赵智育.txt
c.将添加好的文件进行提交本地仓库
git commit -m "提交文本"
d.将本地仓库的内容推送到云仓库上
git push origin master
[注意：云端仓库提前配置完成]
4. Backend
4.1SpringBoot
连接数据库时有时区的问题？
在database后面加上 ?serveTimezone=UTC
项目文件中分为5个文件夹：
1.Controller
2.Iservice
3.mapper
4.pojo
5.service
其中，Controller文件夹中放controller层的代码
Iservice、mapper、service共同组成model层
pojo为数据库表的实体类
4.2 Configuration of application.yml
server:
port: 8080
spring:
datasource:
name: test
url: jdbc:mysql://localhost:3306/his?serveTimezone=UTC
username: root
password: 2019201131
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
type-aliases-package: com.heu.test.pojo
configuration:
map-underscore-to-camel-case: true
logging:
level:
com.heu.test.mapper: trace
4.3 Dynamic SQL statement
@Mapper
public interface UserMapper {
@Select("<script>select * from user where 1=1" +
"<if test=\"name!=null and name != ''\">and UserName=#{name}</if>" +
"<if test=\"id>0\">and ID=#{id}</if>" +
"</script>")
java.util.List<User> getUserList(String name,int id);
@Insert("insert into user(ID, UserName, Password, RealName, UseType, DocTitleID, IsScheduling, DeptID, RegistLeID, DelMark) values" +
" (#{id},#{userName},#{password},#{realName},#{useType},#{docTitleId},#{isScheduling},#{deptId},#{registLeId},#{delMark})")
int insertUser(User user);
@Update("<script>update User set delmark=1 where id in" +
"<foreach collection=\"array\" item=\"eno\" open=\"(\" close=\")\" separator=\",\">" +
"#{eno}</foreach>" +
"</script>")
int deletesById(int[] arr);
@Delete("delete from user where ID=#{id}")
int deleteUserByID(int id);
}
进行模糊查询
and realname like concat('%',#{name},'%')
控制器是直接和前端进行交互的
5. Front-end and back-end interaction
只有axios可以从前端获取后端数据
this.$axios.get().then()
5.1 Handling pointing conflicts
created() {
let that = this //处理指向冲突
this.$axios.get("http://localhost:8080/user/getlist").then(function (res) {
console.log(res.data)
that.userList = res.data //如果用this.userList的话，this指代的就是this.$axios了
})
}
5.2 VUE imports external JS files
外部的.js文件
var 函数名 = (function (){
//函数体
})();
export {
函数名
}
VUE组件内部
<script>
import {函数名} from '路径'
export default {
}
</script>
挂号级别管理：增删改查完成了
科室管理：增删查
cnpm install
cnpm run serve
LeID, DelMark) values" +
" (#{id},#{userName},#{password},#{realName},#{useType},#{docTitleId},#{isScheduling},#{deptId},#{registLeId},#{delMark})")
int insertUser(User user);
@Update("<script>update User set delmark=1 where id in" +
"<foreach collection=\"array\" item=\"eno\" open=\"(\" close=\")\" separator=\",\">" +
"#{eno}</foreach>" +
"</script>")
int deletesById(int[] arr);
@Delete("delete from user where ID=#{id}")
int deleteUserByID(int id);
}
Do fuzzy query
and realname like concat('%',#{name},'%')
The controller interacts directly with the front end
## 5.前后端交互
Only axios can get the backend data from the frontend
this.$axios.get().then()
### 5.1处理指向冲突
created() { let that = this //Processing points to the conflict this. KaTeX parse error: Expected '}', got 'EOF' at end of input: ..., this refers to this. axios }) }
### 5.2VUE导入外部的JS文件
External .js file
var function name = (function (){ //function body })();
export { function name }
Inside the VUE component
Registration level management: additions, deletions, modifications, and checks completed
Department management: additions, deletions, and checks
cnpm install
cnpm run serve