本章讲述了我在写vue3项目时的一些心得体会和笔记,谢谢你的观看。
1.环境搭建
1-1nodejs环境安装
https://nodejs.org/zh-cn/
1-2npm 淘宝镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
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-5vue-router 路由
https://router.vuejs.org/zh/
npm install vue-router@4
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);
3.json-server 的使用
使用json-server的前提是安装好node.js
//使用npm全局安装json-server:
npm install -g json-server
//可以通过查看版本号,来测试是否安装成功:
json-server -v
创建json数据——db.json
既然是造数据,就需要创建一个json数据。
在src同级目录下建立一个db.json,来存储数据
并执行代码:
json-server --watch db.json
json数据的获取
http://localhost:3000/user
// 其中3000是端口号,json-server 默认是 3000 端口,我们也可以自己指定端口,指令如下:
json-server --watch db.json --port 3004
//user代表db数据里数据对象
$.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("获取失败");
},
});
但是会出现一个问题,说你的$没有定义,在我翻阅了很多文章后找到了解决方法,在逻辑层导入
import $ from "jquery";
window.jQuery = $;
window.$ = $;
这样就能完美解决问题
问题解决后就是数据的增删改查了
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");
},
});
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");
},
});
json数据的删除
同样,我们这里也是根据id删除的数据
$.ajax({
type: "delete",
url: "http://localhost:3000/news/" + strToObj.id,
success: function(data) {
router.push("/notify");
},
error: function() {
alert("del error");
},
});
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
新建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: {
},
})
2.state 基本数据,存储变量
const store = new Vuex.Store({
state: {
a: 'true',
b: 2,
c: false,
d: null
},
});
使用的时候
this.$store.state.a
3.getter:从基本数据(state)派生的数据,相当于state的计算属性,具有返回值的方法
getter: {
a: state => state.a,
b: function(state){
return state.b * 2
}
}
使用的时候
this.$store.getters.a
4.mutation:提交更新数据的方法,必须是同步的
mutations: {
a: (state, userId) => {
state.userId = userId
},
b: (state, token) => {
// console.log(token)
state.token = token
}
},
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;
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的值拿出来
5.axios请求数据
1.二次封装axios
npm install axios
或者
cnpm install axios
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 };
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": "",
},
},
},
},
};
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/, '')
}
}
}
});
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>