vant4+json+vue3 app项目开发笔记_vant4+vue3

本章讲述了我在写vue3项目时的一些心得体会和笔记，谢谢你的观看。

1.环境搭建

1-1nodejs环境安装

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

1-2npm 淘宝镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

1-3vite项目搭建

http://www.vitejs.net/

1-4创建vue3项目

# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue
1
2
3
4

1-5vue-router 路由

https://router.vuejs.org/zh/

npm install vue-router@4
1

2.全局导入（根据自身需求）

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import vant from "vant";
import "vant/lib/index.css";
import "./assets/fonts/iconfont.css";
import "virtual:windi.css";
// vant4 图片全局注册组件
import { Image as VanImage } from "vant";
//导入文件
import store from "./store/index";

const app = createApp(App);
//挂载router
app.use(router);
app.use(vant);
app.use(store);
app.mount("#app");
app.use(VanImage);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.json-server 的使用

使用json-server的前提是安装好node.js

//使用npm全局安装json-server：
npm install -g json-server
//可以通过查看版本号，来测试是否安装成功：
json-server -v
1
2
3
4

创建json数据——db.json
既然是造数据，就需要创建一个json数据。
在src同级目录下建立一个db.json，来存储数据
并执行代码：

json-server --watch db.json
1

json数据的获取

http://localhost:3000/user
// 其中3000是端口号，json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：
json-server --watch db.json --port 3004
//user代表db数据里数据对象
1
2
3
4

 $.ajax({
    type: "get",
    url: "http://localhost:3000/user",
    success: function (data) {
      for (var i = 0; i < data.length; i++) {
        if (
          data[i].accounts == accounts.value &&
          data[i].password == password.value
        ) {
          //学生帐号
          if (data[i].key == 1) {
            showDialog({
              message: "账号密码正确，跳转到学生首页",
            }).then(() => {
              // on close
              store.commit("setUserId", data[i].id);
              localStorage.setItem("userId", data[i].id);
              router.push("/studentIndex");
            });
          }
          //老师帐号
          if (data[i].key == 2) {
            showDialog({
              message: "账号密码正确，跳转老师首页",
            }).then(() => {
              // on close
              store.commit("setUserId", data[i].id);
              localStorage.setItem("userId", data[i].id);
              router.push("/teacherIndex");
            });
          }
          return;
        } else {
          showDialog({
            message: "账号密码错误",
          }).then(() => {
            // on close
          });
        }
      }
    },
    error: function () {
      console.log("获取失败");
    },
  });
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

但是会出现一个问题，说你的$没有定义，在我翻阅了很多文章后找到了解决方法，在逻辑层导入

import $ from "jquery";
window.jQuery = $;
window.$ = $;
1
2
3

这样就能完美解决问题
问题解决后就是数据的增删改查了

json数据的增加

如下，使用post的方法，把数据传入到db.json中的user中

$.ajax({
    type: "post",
    url: "http://localhost:3000/user",
    data: {
      accounts: accounts.value,
      password: password.value,
      userName: userName.value,
      identity: identity.value,
      teaNumber: teaNumber.value,
      sex: checked.value,
      phone: phone.value,
      department: identity.value,
      key: 2,
    },
    success: function (data) {
      showDialog({
        message: "注册成功，跳转到登录界面",
      }).then(() => {
        // on close
        router.push("/");
      });
    },
    error: function () {
      alert("post error");
    },
  });

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

json数据的更新

type这里使用 patch方法，数据更新还有put方法但是这里不建议使用，PUT方法会更新整个资源对象，前端没有给出的字段，会自动清空。
下面的userId是id，我们根据id来更新数据

$.ajax({
    type: "patch",
    url: "http://localhost:3000/user/" + userId,
    data: {
      subject: subject.value,
    },
    success: function (data) {
      console.log("put success");
    },
    error: function () {
      alert("put error");
    },
  });
1
2
3
4
5
6
7
8
9
10
11
12
13

json数据的删除

同样，我们这里也是根据id删除的数据

     $.ajax({
        type: "delete",
        url: "http://localhost:3000/news/" + strToObj.id,
        success: function(data) {
          router.push("/notify");
        },
        error: function() {
          alert("del error");
        },
      });
1
2
3
4
5
6
7
8
9
10

4.数据保存在浏览器里（vuex方法）

首先，我们要知道什么是vuex，vuex是一个个专为 Vue.js 应用程序开发的状态管理工具，它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法就是在mutaions里修改state，actions不能直接修改state
1.state 数据存贮
2.getter state的计算属性
3.mutation 更改state中状态的逻辑 同步操作
4.action 提交mutation 异步操作
5.model 模块化

1.配置vuex

也可以在脚手架 创建项目时勾选vuex的选项系统会自动创建
如果采用脚手架方式进行创建，无需任何操作，可以忽略此步骤

npm install vuex@next --save
1

新建store文件->index.js，进行如下配置，在main.js中进行引入

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    
  },
  getters: {
    
  },
  //里面定义方法，操作state方发
  mutations: {
    
  },
  // 操作异步操作mutation
  actions: {
    
  },
  modules: {
    
  },
})
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

2.state 基本数据，存储变量

const store = new Vuex.Store({
state: {
    a: 'true',
    b: 2,
    c: false,
    d: null
  },
});
1
2
3
4
5
6
7
8

使用的时候

this.$store.state.a
1

3.getter：从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法

getter: {
    a: state => state.a,
    b: function(state){
      return state.b * 2
  	}
  }
1
2
3
4
5
6

使用的时候

this.$store.getters.a
1

4.mutation：提交更新数据的方法，必须是同步的

mutations: {
    a: (state, userId) => {
      state.userId = userId
    },
    b: (state, token) => {
      // console.log(token)
      state.token = token
    }
  },
1
2
3
4
5
6
7
8
9

5.数据存储和提取

store/index.js

// 导入vuex 创建实例方法
import { createStore } from "vuex";
// 创建实例对象
const store = createStore({
  state() {
    return {
      // 共用属性：用户信息
      userId: "",
      newsData: "",
      token: "",
    };
  },
  mutations: {
    // 共用方法： 设置用户信息
    setUserId(state, id) {
      state.userId = id;
    },
    setNewsData(state, data) {
      state.newsData = data;
    },
  },
});
// 导出数据对象
export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 store.commit("setUserId", data[i].id);
 // setUserId 是 调用的mutation里的方法，对state里的公共属性进行给值，将data[i].id的值进行传递,
 
 localStorage.setItem("userId", data[i].id);
 //把data[i].id的值存到userId中
 const userId = localStorage.getItem("userId");
 //把userId的值拿出来
1
2
3
4
5
6
7

5.axios请求数据

1.二次封装axios

npm install axios
或者
cnpm install axios
1
2
3

2.二次封装axios

在实际的项目中，我们一般不会直接将安装好的axios进行使用，而是进行二次封装，接下来我们来简单的封装,.
第一步 创建 utils/http.js
在src文件在下创建utils文件夹，在utils里创建 http.js文件
第二部 编写http.js

//引入安装好的axios插件
import axios from "axios";
// 查询数据
const get = (url, params) => {
    return axios.get(url);
};
// 添加数据
const post = (url, data) => {
    return axios.post(url, data);
};
// 修改数据
const put = (url, data) => {
    return axios.put(url, data);
};

// 删除数据
const del = (url, data) => {
    return axios.delete(url);
};

//将二次封装好的axios导出
export { get, post, put, del };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.项目使用axios

1.vue/cli脚手架配置代理——vue.config.js 解决跨域问题

项目的端口为8080,然后json文件的端口为3000，这样就会涉及到跨域，解决跨域的方式很多种，此处讲解一下配置proxy代理
在根目录下创建文件vue.config.js，覆盖webpack的一些内容。

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        // 此处的写法，目的是为了 将/api 替换成 http://localhost:3000
        target: "http://localhost:3000",
        //是否跨域
        changeOrigin: true,
        //路径重写 下面示例为 将 /api 替换成空
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.vite配置代理——-vite.config.js

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.发送axios请求

<script>
import { get, post, put, del } from "./utils/http";
export default {
  methods: {
    // get查询infomation的所有信息
    async sendRequest() {
      let res = await get("/api/infomation");
      console.log("get查询infomation的所有信息", res);
    },
    // get查询infomation的id为1信息
    async sendRequest2() {
      let res2 = await get("/api/infomation/1");
      console.log("get查询infomation的id为1信息", res2);
    },
    // post添加infomation数据
    async sendRequest3() {
      let res3 = await post("/api/infomation", {
        title: "json-server 的第xxx条数据",
        desc: "奥特曼不想打小怪",
        author: "被奥特曼打了",
      });
      console.log(res3, "post添加infomation数据成功");
    },
    // pust修改infomation的id为1信息
    async sendRequest4() {
      let res4 = await put("/api/infomation/1", {
        title: "json-server 的第x+1条数据",
        desc: "奥特曼想打小怪111",
        author: "2222被奥特曼打了",
      });
      console.log(res4, "pust修改infomation的id为1信息成功");
    },
    // del删除infomation的id为1信息
    async sendRequest5() {
      let res4 = await del("/api/infomation/1");
      console.log(res4, "del删除infomation的id为1信息数据成功");
    },
  },
};
</script>
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