first commit

实训内容/json-server/db.json

@@ -0,0 +1,102 @@
+{
+  "users": [],
+  "questions": [],
+  "goods": [],
+  "news": [
+    {
+      "title": "1111111",
+      "content": "11111111",
+      "id": 4
+    },
+    {
+      "title": "5555444",
+      "content": "555555",
+      "id": 5
+    }
+  ],
+  "students": [
+    {
+      "name": "1111",
+      "grade": "11111111",
+      "score": "1111",
+      "id": 1
+    },
+    {
+      "name": "222222111",
+      "grade": "222224444",
+      "score": "22222",
+      "id": 2
+    },
+    {
+      "name": "111",
+      "grade": "111",
+      "score": "11111",
+      "id": 3
+    },
+    {
+      "name": "3212",
+      "grade": "312312",
+      "score": "3123",
+      "id": 4
+    },
+    {
+      "name": "111",
+      "grade": "111",
+      "score": "111111",
+      "id": 5
+    },
+    {
+      "name": "111",
+      "grade": "11111",
+      "score": "111111",
+      "id": 6
+    },
+    {
+      "name": "5555",
+      "grade": "5555",
+      "score": "555",
+      "id": 7
+    },
+    {
+      "name": "5555677",
+      "grade": "4564",
+      "score": "64565",
+      "id": 8
+    },
+    {
+      "name": "reqwr",
+      "grade": "fe",
+      "score": "324",
+      "id": 9
+    },
+    {
+      "name": "qwe",
+      "grade": "ddsf",
+      "score": "ewr",
+      "id": 10
+    },
+    {
+      "name": "二七r",
+      "grade": "ewr",
+      "score": "wer",
+      "id": 11
+    }
+  ],
+  "posts": [
+    {
+      "id": 1,
+      "title": "json-server",
+      "author": "typicode"
+    }
+  ],
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "postId": 1
+    }
+  ],
+  "profile": {
+    "name": "typicode"
+  }
+}

实训内容/json-server/json-server.txt

@@ -0,0 +1,59 @@
+Json-server
+1.全局安装 
+	npm install -g json-server
+	安装axios npm install axios 
+	axios文档：https://www.w3cschool.cn/jquti/jquti-kb3a35x1.html
+2.安装成功 
+	json-server -v
+3.运行 json-server --watch db.json
+4.post--增加数据  get--获取数据   patch请求--修改数据   delete请求--删除数据
+5.post--增加          post 请求 响应成功的是201  其他请求响应成功是200
+	输入title和content 添加到db.json中news中
+	axios.post('http://localhost:3000/news', {
+        title: this.title,
+        content: this.content
+      }).then(function (response) {
+        console.log(response)
+      }).catch(function (error) {
+        console.log(error)
+      })
+	 添加完后获取（get）到news的数据，渲染到页面中的表格
+	const that = this
+      axios.post('http://localhost:3000/news', {
+        title: this.title,
+        content: this.content
+      }).then(function (response) {
+        // eslint-disable-next-line eqeqeq, no-empty
+        if (response.status == 201) {
+          // post 请求 响应成功的是201  其他请求响应成功是200
+          axios.get('http://localhost:3000/news').then(function (res) {
+            console.log(res) // 响应返回的数据进行一次输出，去判断你的请求是否成功
+            that.dataList = res.data
+          })
+        }
+        console.log(response)
+      }).catch(function (error) {
+        console.log(error)
+      })
+6.delete--删除 
+	传入要删除的id 删除对应的数据
+	const that = this
+      axios.delete(`http://localhost:3000/news/${cid}`).then(function (res) {
+        console.log(res)
+        // eslint-disable-next-line eqeqeq
+        if (res.status == 200 && res.statusText == 'OK') {
+          that.getNews()
+        }
+      })
+7.patch--修改
+ 	点击修改 将获取到item数据 赋值到上面input里面
+	const that = this
+      axios.patch(`http://localhost:3000/news/${this.id}`, {
+        title: this.title,
+        content: this.content
+      }).then(function (res) {
+        if (res.status === 200) {
+          that.getNews()
+        }
+        console.log(res)
+      })

实训内容/实训-Vue.md

@@ -0,0 +1,132 @@
+## Vue2版
+
+Vue2官网：https://v2.cn.vuejs.org/v2/guide/
+
+### 1. 创建vue项目
+
+#### 全局安装
+
+```powershell
+npm install -g @vue/cli
+```
+
+#### 安装后查看是否安装成功
+
+```
+vue -V
+```
+
+![image-20240402143500429](D:\work\公司\实训\实训计划\实训-Vue\image-20240402143500429.png)
+
+#### 创建Vue项目
+
+```powershell
+vue create project-name
+```
+
+![image-20240402143807384](D:\work\公司\实训\实训计划\实训-Vue\image-20240402143807384.png)
+
+![image-20240402144106303](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144106303.png)
+
+![image-20240402144156264](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144156264.png)
+
+#### 创建完成
+
+![image-20240402144406688](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144406688.png)
+
+### 2. 运行
+
+```powershell
+cd project-name
+npm run serve
+```
+
+![image-20240402144507047](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144507047.png)
+
+![image-20240402144535517](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144535517.png)
+
+### 3. element-ui
+
+官网：https://element.eleme.cn/#/zh-CN/component/installation
+
+#### 安装
+
+```powershell
+npm i element-ui -S
+```
+
+#### 引入：全局引入
+
+```js
+//main.js
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+Vue.use(ElementUI);
+```
+
+#### 引入：按需引入方式1
+
+```js
+//main.js
+import "@/plugins/element";
+//@/plugins/element.js
+import Vue from "vue";
+import { Button, Loading,MessageBox } from "element-ui";
+Vue.use(Button);
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+```
+
+#### 引入：按需引入方式2
+
+```js
+//babel.config.js
+module.exports = {
+  presets: [
+    "@vue/cli-plugin-babel/preset",
+    ["@babel/preset-env", { modules: false }],
+  ],
+  plugins: [
+    [
+      "component",
+      {
+        libraryName: "element-ui",
+        styleLibraryName: "theme-chalk",
+      },
+    ],
+  ],
+};
+```
+```js
+//./components/element/index.js
+import { Button, Input, Radio, Table, Form } from "element-ui";
+const coms = [Button, Input, Radio, Table, Form];
+export default {
+  install(Vue, options) {
+    coms.map((c) => {
+      Vue.component(c.name, c);
+    });
+  },
+};
+```
+```js
+//main.js
+import element from "./components/element";
+Vue.use(element);
+```
+
+#### 使用
+
+```html
+//vue文件中
+<template>
+  <div id="app">
+    <el-button>默认按钮</el-button>
+    <el-button type="primary">主要按钮</el-button>
+  </div>
+</template>
+```
+
+![image-20240402145534211](D:\work\公司\实训\实训计划\实训-Vue\image-20240402145534211.png)
+
+

实训内容/实训-axios.md

@@ -0,0 +1,168 @@
+### 请求后端
+
+#### axios
+
+文档：https://www.axios-http.cn/docs/intro
+
+#### 安装
+
+```powershell
+npm install axios
+```
+
+#### 请求
+
+```js
+import axios from "axios";
+axios.post('/user', {
+	firstName: 'Fred',
+	lastName: 'Flintstone'
+})
+.then(function (response) {
+	console.log(response);
+})
+.catch(function (error) {
+	console.log(error);
+});
+```
+
+#### 封装请求
+
+**utils/request.js**
+
+```js
+import axios from "axios";
+import { MessageBox, Message } from "element-ui";
+const request = axios.create({
+  baseURL: "/api", //请求的url
+  timeout: 10000, // 请求超时
+  withCredentials: false, //跨域请求是否需要携带 cookie
+});
+function getToken() {
+  //获取token, token可以放在store, 也可以放在sessionStorage或localStorage
+  const token = sessionStorage.getItem("token") || "";
+  return token;
+}
+
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    // 请求接口统一添加token
+    config.headers["Authorization"] = "Bearer " + getToken();
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 2xx 范围内的状态码都会触发该函数。
+    // 对响应数据做点什么
+    // 后端返回格式 定义：
+    // {
+    //   data,
+    //   message,
+    //   code
+    // }
+    const code = response.data.code;
+    const msg = response.data.message;
+    // 当状态码不等于200时，请求数据有问题
+    if (code === 401) {
+      // 比如设置401：登录过期
+      MessageBox.confirm(
+        "登录状态过期，您可以继续留在该界面，或重新登录",
+        "系统提示",
+        {
+          confirmButtonText: "重新登录",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      ).then(() => {
+        //跳转至登录页面
+      });
+    } else if (code === 500) {
+      Message({ message: msg, type: "error" });
+      return Promise.reject(new Error(msg));
+    } else {
+      // 当状态码等于200时，说明成功
+      return response.data.data;
+    }
+  },
+  function (error) {
+    // 超出 2xx 范围的状态码都会触发该函数。
+    // 对响应错误做点什么
+    Message({ message: error, type: "error", duration: 5 * 1000 });
+    return Promise.reject(error);
+  }
+);
+
+export default request;
+```
+**api/user.js**
+
+```js
+import request from "@/utils/request";
+export function getUserInfo() {
+  return request({
+    url: "/getInfo",
+    method: "get",
+    params: {
+       id: "1111"
+    }
+  });
+}
+export function changePwd() {
+  return request({
+    url: "/changePwd",
+    method: "post",
+    data: {
+       id: "1111"
+    }
+  });
+}
+```
+**Vue页面**
+
+```js
+import { getUserInfo } from "@/api/user";
+export default {
+  data() {
+    return {
+      name: 11,
+    };
+  },
+  mounted() {
+    getUserInfo().then((res) => {
+      console.log(res);
+    });
+  },
+};
+```
+
+#### 跨域问题
+**vue.config.js**
+
+```js
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  devServer: {
+    port: 9091,
+    open: true,
+    proxy: {
+      "/api": {
+        target: `http://localhost:9090`,//实际请求的后端地址
+        changeOrigin: true,
+        pathRewrite: {
+          "/api": "",
+        },
+      },
+    },
+  },
+});
+```
+