vscode安装和使用：

vscode官网地址： code.visualstudio.com

插件安装：chines ,live server, vetur, vue-helper

工作区的保存：

网页的打开：

ES6:

基本语法：

const 声明常量：

取值赋值操作：

模板字符串：

声明对象的简写：
{}中声明的是对象。

对象扩展运算符：

箭头函数：
即函数得简化版本：
这里的函数体即 返回值；

左边是参数，右边是返回值

vue入门：

官网地址：https://cn.vuejs.org/

vue.js的下载：

基本介绍：

插值表达式：

创建代码片段：

vue基本语法:

单向数据绑定：

如：v-bind:style
或者简写成 :style

    
    
    
    
    



    

        {{msg}}
        
单向绑定
    
    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

双向数据绑定：

双向同步改变，任何一个改变，另一个绑定的也会跟着改变。

:value=“” 是单向数据绑定的简化版本;
v-model=""是双向数据绑定的格式

    
    
    
    
    


    

        {{str}}
        

        
单向数据绑定
        
        

        
双向数据绑定
        
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

vue事件绑定：

v-on: 事件名称=“调用方法”
简写的方式如下：
@事件名称=“调用方法”

    
    
    
    
    


    

        事件绑定简化版

        事件绑定
    
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

条件渲染：

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

官网案例：

    
    
    
    
    


    

        
你好vue
    
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

案例二：

    

        
大于0
        
小于0
    
    
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

案例三：

    

        
        


        
选中了
  

        
没有选中
    
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

列表渲染：

    
    
    
    
    


    

    

        {{index}},{{user.name}} --- {{user.age}}
    
    
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

vue声明周期：

写完代码后重新刷新一下：点前进调试程序：

    
    
    
    
    
    


    

       
{{msg}}
    
    
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

axios:

地址：
https://github.com/

搜索：axios

    
    
    
    
    
    


    

        

            

                
{{user.name}}
                
{{user.age}}
            
        
    
    
    
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

element-ui:

https://element.eleme.cn/#/zh-CN

node.js：

官网地址：https://nodejs.org/zh-cn/

下载安装：

https://nodejs.org/zh-cn/

建议和老师版本一样，不然后面一大堆麻烦；

历史版本下载：
https://nodejs.org/zh-cn/download/releases/

2、安装
打开安装，傻瓜式下一步即可：

3.测试是否安装成功：cmd 输入node -v

运行js的方式一:

1.编写一个js文件：

测试一：

在当前js的文件下cmd中打开运行：node 01.js

测试二：

执行js方式2：

终端报错的，先关掉vscode，然后设置兼容性–>以管理员身份运行，然后重启软件即可

vscode设置文件的自动保存：文件–>首选项–>设置–搜索save，然后打开自动保存

测试js的运行：

npm包管理工具:

node已经集成了npm 不用再单独去装npm

安装npm:

版本遇到的问题：

npm WARN config global --global, --local are deprecated. Use --location=global instead

解决方法：

打开nodejs安装位置的文件夹。并打开两个文件 npm.cmd 和 npm

找到那2个文件里面的prefix -g替换为prefix --location=global

23行左右一个：

12行左右一个：

修改完之后、关闭之前的命令行窗口。重新打开一个新的命令行窗口，检查一下。
最后打开cmd，查询npm版本即可！！！

二、其次还有变更npm版本
①打开命令提示符，WIN+R 输入cmd，输入以下代码，我选择的是8.12.1。
npm install -g npm-windows-upgrade
npm-windows-upgrade

②测试一下，npm -v

然后设置镜像：

注意：npm 切换,当遇到npm高版本不能用的时候建议切换低版本，不行去掉sudo:
sudo npm -g install npm@6.4.1

遇到的错误：

npm WARN npm npm does not support Node.js v16.16.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\fan\AppData\Roaming\npm-cache\_logs\2022-07-29T04_42_05_867Z-debug.log
1
2
3
4
5
6
7
8
9

npm版本过旧，安装对应版本，
在此网址查找对应版本：https://nodejs.org/zh-cn/download/releases/
vscode中的终端执行：

npm -g install npm@8.11.0
还不行的话，使用8.12.1版本
还是不行的话，就是缓存问题：

这说明npm存在旧的npm缓存，还是旧的npm 环境。
我将 C:\Users\user\AppData\Roaming下的 npm、npm-cache两个文件删除

删除后重新执行 npm -g install npm@8.11.0，低版本6.4.1
最后完美解决

1.先创建一个文件夹：npmdemo

2.设置淘宝镜像：

跳转到需要添加的项目路径， 安装npm淘宝镜像：

npm config set registry https://registry.npm.taobao.org
npm config list

npm初始化：

npm init
或者如下一步到位：
npm init -y

npm基本命令：

npm 下载文件：如

npm install jquery
或者下载指定的版本：
npm install jquery@2.1.x

npm install -g webpack
webpack -v 测试是否安装成功

模块化：

自己创建文件夹src:

01.js:

export default {
    list(){
        console.log("ilst---")
    },
    save(){
        console.log("save---")
    }
}
1
2
3
4
5
6
7
8

02.js:

import user from './01.js'

//调用
user.list()
user.save()
1
2
3
4
5

然后执行js:在src下执行：node 02.js

执行报错：

Babel转码：

第一步：

npm install -g babel-cli ，这里不行的话，要删除缓存，警告不用管
这里报错：是npm版本过高导致，我们又得退回低版本6.4.1,npm -g install npm@6.4.1
babel --version

报错问题解决方案：https://blog.csdn.net/m0_59751822/article/details/125229851

或者直接PowerShell中执行：Set-ExecutionPolicy RemoteSigned

第二步：

.babelrc ，此文件和src平齐

文件内写入：

{
    "presets": ["es2015"],
    "plugins": []
}
1
2
3
4

第三步：

安装转码器：

npm install -D babel-preset-es2015

在根目录执行：

npm install -D babel-preset-es2015

第四步：

创建一个输出文件：dist
目的：将src中的内容转成es5输出到dist中

babel src -d dist

然后执行调用js,在dist下: node 02.js

另一种js调用写法：

webpack:

第一步：安装

创建一个单独的文件夹：webpackdemo

然后初始化此文件夹：npm init -y

然后做全局安装：

npm install -g webpack webpack-cli
webpack -v 查看版本号

第二步：

01.js内容：

exports.info=function(str){
    document.write(str)
}
1
2
3

02.js内容：

exports.add=function(a,b){
    return a+b;
}
1
2
3

在src下创建main.js文件：把要打包的文件进行引入
main:js:

const a= require("./01.js")
const b= require("./02.js")

a.info("hello--: " + b.add(1,2))
1
2
3
4

第三步：js打包

在根目录下创建文件：webpack.config.js:

const path=require("path"); //Node.js内置模块
module.exports= {
entry:"./src/main.js", //配置入口文件
output:{
//其他配置
    path: path.resolve(__dirname,"./dist"),//输出路径
    filename: "bundle.js" //输出文件
    }
    
}
1
2
3
4
5
6
7
8
9
10

并在根目录下创建dist输出文件夹

第四步：打包：

webpack --mode=development

测试：01.html:

01.html:

    
    
    
    


    


1
2
3
4
5
6
7
8
9
10
11
12

打开页面成功显示；

css打包：

安装css打包工具：

npm install -D style-loader css-loader

module: {
rules: [  
            {  
test: /\.css$/,    //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
            }  
        ]  
    }
1
2
3
4
5
6
7
8

5.3在src文件夹创建style.css

5.4修改main.js

在第一行引入style.css
require(‘./style.css’)

删掉绑定文件，重新打包：

5.5重新打包
webpack --mode=development

然后浏览器刷新看：

vue-element-admin 前端环境搭建：

注意：springboot使用2.2.1

https://panjiachen.github.io/vue-element-admin-site/zh/guide

npm install
下载失败的，先用npm cache clean --force命令清除一下缓存！然后再重新下载一遍

注意官网下载下来的文件有两层外包装，要复制里面的；

node版本高的问题：
报错的可以试试，npm install -g node-gyp ，再重新安装

启动项目：

npm run dev

新版本的脚手架vue-admin-template可以直接成功进入页面：

但是旧版的不行：

修改部分文件：

修改的地方一：

修改的地方二：
获取用户信息的方法// get user info

头像地址： ‘https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif’

import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'

const user = {
  state: {
    token: getToken(),
    name: '',
    avatar: '',
    roles: []
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {

      const data = {'token':'admin'}
      setToken(data.token)
      commit('SET_TOKEN', data.token)

      // const username = userInfo.username.trim()
      // return new Promise((resolve, reject) => {
      //   login(username, userInfo.password).then(response => {
      //     const data = response.data
      //     setToken(data.token)
      //     commit('SET_TOKEN', data.token)
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })

    },

    // 获取用户信息
    GetInfo({ commit, state }) {

      const data = {'roles':'admin','name':'admin','avatar':'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'}
      if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
        commit('SET_ROLES', data.roles)
      } else {
        reject('getInfo: roles must be a non-null array !')
      }
      commit('SET_NAME', data.name)  //设置名字
      commit('SET_AVATAR', data.avatar)  //设置头像

      // return new Promise((resolve, reject) => {
      //   getInfo(state.token).then(response => {
      //     const data = response.data
      //     if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
      //       commit('SET_ROLES', data.roles)
      //     } else {
      //       reject('getInfo: roles must be a non-null array !')
      //     }
      //     commit('SET_NAME', data.name)
      //     commit('SET_AVATAR', data.avatar)
      //     resolve(response)
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 登出
    LogOut({ commit, state }) {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      // return new Promise((resolve, reject) => {
      //   logout(state.token).then(() => {
      //     commit('SET_TOKEN', '')
      //     commit('SET_ROLES', [])
      //     removeToken()
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 前端 登出
    FedLogOut({ commit }) {
      //return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
      //})
    }
  }
}

export default user

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

修改完之后保存，从新启动项目 npm run dev

测试登录登出功能；

1.设置增加一个漏由：

{
    path: '/hospSet',
    component: Layout,
    redirect: '/hospSet/list',
    name: '医院设置管理',
    meta: { title: '医院设置管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '医院设置列表',
        component: () => import('@/views/hospset/list'),
        meta: { title: '医院设置列表', icon: 'table' }
      },
      {
        path: 'add',
        name: '医院设置添加',
        component: () => import('@/views/hospset/add'),
        meta: { title: '医院设置添加', icon: 'tree' }
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.增加视图页面：修改视图的跳转路径

修改页面：list.vue:

1
2
3
4
5

3.修改api中的请求：

复制一个模板：

最终的：

import request from '@/utils/request'


export default {
  getHospSetList (current ,limit,searchObj){
    return request({
      url:`/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
      mothod:'post',
      data : searchObj  //使用json传输
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

hospset.js:

import request from '@/utils/request'

//定义接口路径的

export default {
   //医院设置列表
   getHospSetList(current,limit,searchObj) {
    return request ({
      url: `/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
      method: 'post',
      data: searchObj  //使用json
    })
  }
  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

修改项目端口号：config.dev.env.js中：

继续修改页面：list.vue:

最后的list.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

数据库增加几个数据：

 /**
     * 分页插件
     * @return 分页插件的实例
     */
    @Bean
    public PaginationInnerInterceptor paginationInterceptor() {
        return new PaginationInnerInterceptor();
    }
1
2
3
4
5
6
7
8

测试分页的后端，ok;

重新启动前端的项目：

打开 config/index.js，配置是否开启语法检查
useEslint: false,

医院设置前端列表3：

list.vue中的div中使用表格模板：

完整的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

然后刷新页面：

分页查询：

分页插件：放在el-table外的紧邻下边

        
        
1
2
3
4
5
6
7
8

表单查询：

查询框放在table上面：

  
        
         
          
         
         
          
         
         
          查询
        
        
1
2
3
4
5
6
7
8
9
10
11
12

逻辑删除按钮：

 
            
        
1
2
3
4
5
6

删除的接口路径的定义：

删除的页面js：

//删除医院设置的方法
        removeDataById(id){
           // alert(id);
           //hospset.deleteHospSet(id)
            this.$confirm('此操作将永久删除该医院设置信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                //调用删除接口
                hospset.deleteHospSet(id)
                .then(res =>{
                    //1.提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //2.刷新页面
                    this. getList(1) //默认查询第一页数据
                })
            
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
           
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

到此的list.vue完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

批量删除

增加页面的复选框和批量删除按钮：

绑定事件：

方法定义：

methods: {
        //获取选择复选框的id值，并传递给方法的参数中selection

        handleSelectionChange(selection) {
            console.log(selection)
        },
        //批量删除
        removeRows(){

        },
        //医院设置列表
        getList(page = 1){
            this.current = page;
            hospset.getHospSetList(this.current,this.limit,this.searchObj)
            .then(response => {
                console.log(response)
                //返回结合数据
                this.list = response.data.records
                //总记录数
                this.total = response.data.total

            })
            .catch(error => {
                console.log(error)
            })
        },
        //删除医院设置的方法
        removeDataById(id){
           // alert(id);
           //hospset.deleteHospSet(id)
            this.$confirm('此操作将永久删除该医院设置信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                //调用删除接口
                hospset.deleteHospSet(id)
                .then(res =>{
                    //1.提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //2.刷新页面
                    this. getList(1) //默认查询第一页数据
                })
            
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
           
        }

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

批量删除的api:

//批量删除医院设置，传给后端的参数都在request中
  batchRomeveHospSet(idList){
    return request ({
      url: `/admin/hosp/hospitalSet/batchRemove`,
      method: 'delete',
      data : idList  //传给后端接口的数据，json形式传递
    })
  }
1
2
3
4
5
6
7
8

批量删除代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

医院状态的设置：

修改接口api:

//锁定和取消锁定
  lockHospSet(id,status){
    return request({ //返回请求
      url: `/admin/hosp/hospitalSet/lockHospSet/${id}/${status}`,
      method: 'put',
    })
  }
1
2
3
4
5
6
7

碎丁和取消锁定按钮：

按钮组件：

 锁定 

    取消锁定 
1
2
3
4
5

//锁定和取消锁定
        lockHostSet(id,status){
            hospset.lockHospSet(id,status)
            .then(response => {
                //刷新到当前页
                this.getList(this.current)
            })
        },
1
2
3
4
5
6
7
8

医院设置的添加：

api:

add.vue

form组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

js方法;

总的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56