vue3+vant3+mysql网上商城

 

一.搭建项目

1.vue creat mall

• babel

• router

• vuex

1. vue3

2. history模式

3. 配置文件放在单独的文件夹里 package.json

4. 不要保存配置模式，每次都重新安装项目（因为不同项目有不同要求）

2.安装vant

记得安装在项目内（pack.json里面可以查看版本)

node -v(查看版本)

npm i vant（这是安装的最新版也就是vant3）

3.非vite项目中引入组件要安装插件

npm i babel-plugin-import -D

配置插件：在babel.config.js中添加配置

module.exports = { presets: [ '@vue/cli-plugin-babel/preset', require.resolve('babel-preset-react') ], plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: true } ] ] }

4.main.js中引入组件

import { createApp } from 'vue'; import { Button } from 'vant';

const app = createApp(App);//全局使用 app.use(Button);//不要和原先的app.use弄混了

5.现在可以编译一下了

npm run serve

二.开始写内容

1.原来helloworld里的nal中的链接可以删了

2.修改路由，index.js

import xx from '@/components/helloworld'; //从'@/components/helloworld'路径导入一个名为xx的模块

按需引入的about路由可以删除了{}内的内容，不要删多了，不要把最后的中括号删了。

同时把home改为helloworld路由

3.主体内容

主体内容：模板（template），脚本（script）和"scoped"属性的style标签。模板中为div元素，类名，元素。在脚本中，定义了一个名为Helloworlddata的组件，返回一个对象。带有"scoped"属性的style标签，用于限制CSS样式仅应用于该组件。

scoped属性是Vue.js中用于样式封装的一个特性。当在Vue组件的<style>标签上添加scoped属性时，该组件内的样式将仅对当前组件生效，不会影响到其他组件。

4.css reset：

（百度搜就行）用于重置浏览器的默认样式。它的作用是消除不同浏览器之间的样式差异，使得网页在不同浏览器中显示一致。放在仨asset文件夹下

使用import语句来引入静态资源（asset）

main.js中引入reset import '@/assets/reset.css';

若修改vue文件名，路由里也要对应修改，否则会报错

5.插入图片

​

​

6.调整格式

.类名{} 例子：.helloworld{}

.一级类名 类型.二级类名{}

例子：.helloworld img.logo{}

7.脚本中引入组件

ref 和 reactive 是用于创建响应式数据的方法

ref：用于创建一个响应式的值，可以通过 .value 属性访问和修改

reactive：用于创建一个响应式的对象，可以直接通过属性名访问和修改。

import 语句导入了 ref 和 reactive 函数，这些函数用于创建响应式数据。定义命名组件，组件中包含了一个 data 选项和一个 setup 函数。在 setup 函数中，使用 ref 函数创建响应式数据，并将其返回。

export default {} 是 JavaScript 中用于导出一个空对象的语法。它通常用于模块导出，以便其他模块可以导入并使用这个空对象。

8.样式穿透：

::v-deep

它允许在子组件中定义的样式规则能够影响到父组件的样式。

使用： .父组件类名 ::v-deep .子组件类名

三.vue3->node.js的中间件

1.中间件

用于处理数据，middleware.js（node.js的中间件，Node.js服务器文件）放在middleware文件夹下面

npm init -y

npm init -y 用于在当前目录下快速生成一个默认的 package.json 文件。这个命令会使用默认的配置选项来创建一个新的 package.json 文件，而不需要用户手动输入任何信息。当运行 npm init -y 时，它会创建一个包含基本字段的 package.json 文件，这个文件包含了一些基本的元数据，如项目名称、版本号、描述、入口文件等。可以根据需要修改这些字段的值。

package.json 是项目的配置文件，用于描述项目或模块包的元信息和依赖关系。他包含：

1. 项目信息：记录项目的基本元信息，如项目名称、版本号、描述、作者等。

2. 依赖管理：列出项目所需的所有依赖包及其版本，可以通过运行 npm install 命令来安装这些依赖。

3. 脚本命令：定义一些常用的脚本命令，如启动、打包、测试等，方便开发者快速执行这些操作。

4. 构建配置：对于使用构建工具的项目，package.json 中可以包含构建工具的配置信息，以满足特定的构建需求。

5. 版本控制：package.json 中的依赖版本号前可能会带有符号（如 ^ 或 ~），这些符号代表了依赖更新的策略，影响 npm 安装或更新依赖时的行为。

6. 模块分发：如果是要构建在 npm 上分发的 Node.js 软件包，package.json 必须包含一组属性，以帮助其他开发者使用该软件包。

2.安装express.js框架

npm i express -D

在项目中使用 Express.js 来搭建 Web 服务器和处理 HTTP 请求

let express = require('express'); //用 Node.js 的 require 函数来导入 "express" 这个模块，并将其赋值给变量 express。这样就可以使用 express 这个变量来访问 Express.js 框架的功能

let app=express() //通过调用 express 函数（实际上是一个构造函数）来创建一个新的 Express.js 应用实例，并将其赋值给变量 app。这个 app 对象代表了Web 应用，使用它来定义路由、中间件

// 定义API接口

app.get('/xxx', function(req, res) {

let _d =[{

}]

res.send(_d); });

// 启动服务器

app.listen(8081, function() { console.log('8081，中间件已经执行'); });

这是个简单的 Express.js 服务器，监听在 8081 端口上。当访问 /xxx 路径时，会返回一个 JSON 对象 {a:123}。同时，在控制台输出一条消息 "8081，中间件已经执行"。

3.安装axios

npm i axios -D

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。

4.跨域问题

配置vue.config.js跨域文件

module.exports = { devServer: { host: 'localhost', port: 8080, https: false, open: true, // 自动打开浏览器 proxy: { '/api': { target: 'http://localhost:8081', // 后台地址 ws: true, // 用于websockets changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': 'http://localhost:8081' // 请求时重写路径 } } } } };

使用webpack-dev-server的配置文件，通过配置proxy实现跨域请求。在devServer对象中，设置了host、port、https和open等属性，其中open属性设置为true表示自动打开浏览器。然后，在proxy对象中，设置了一个代理规则，将/api开头的请求代理到http://localhost:8081这个地址上。同时，设置了ws为true，用于支持websockets协议；changeOrigin为true，允许跨域请求；pathRewrite属性用于重写路径，将/api替换为http://localhost:8081。这样，当访问本地服务器时，如果请求以/api开头，就会被代理到http://localhost:8081这个地址上，从而实现跨域请求。

5.在Vue3组件中使用axios发送HTTP请求

import axios from 'axios'; // 在script里面引入

export default { data() { return { data: [] } },

// 定义一个名为 setup 的函数 setup() { axios.get('/api/data') .then(_d => { // 请求成功时的回调函数，打印返回的数据 console.log(_d.data); }) .catch(error => { // 请求失败时的回调函数，打印错误信息 console.log(error); }); } }

实例：

setup() { let goodsTypeVal = ref(0);//定义了一个响应式引用变量 goodsTypeVal，并初始化为0 //产品类别按钮 let goodsTypeDataObj = reactive({arr:[]});//定义了一个响应式对象 goodsTypeDataObj，并初始化其属性 arr 为一个空数组。 axios.get("/api/goodsTypeData").then( d => { console.log(d.data); goodsTypeDataObj.arr = d.data; }); return {goodsTypeVal, goodsTypeDataObj}; }

//发送一个GET请求到 "/api/goodsTypeData",求成功时，会打印返回的数据，并将数据赋值给 goodsTypeDataObj.arr

6.在template里使用获取的数据

遍历goodsTypeData0bj.arr数组中的每个元素，并将元素的txt属性值赋给title

v-for='n in goodsTypeData0bj.arr' :title="n.txt"

7.总结版本：引入组件全过程

(1)main.js中全局注册组件

(2)vue文件中template中引入示例代码和style样式

(3)中间件（middleware.js）中定义API接口并存入数据

(4)vue文件中script中发送axios请求：定义响应式对象，并初始化为空数组，用来接收api请求返回的数据。并在return中导出对象

(5)在vue文件的template中遍历响应式对象数字中的每个元素，并赋值到组件中。

四.内容完善

1.style格式

goodsDragBtnList { overflow-x: scroll;//表示当元素的内容超出其宽度时，显示横向滚动条。 }

// ::-webkit-scrollbar是一个伪元素，用于改变WebKit内核浏览器（如Chrome、Safari等）的滚动条样式

goodsDragBtnList::-webkit-scrollbar { /* 在这里添加滚动条样式 */ }

2.封装axios

/*这里是封装了一些 axios 的功能，便于以后扩*/

import axios from 'axios'

// 新建一个axios对象

const axiosInstance = axios.create({

baseURL: '/api'

})

// 请求拦截

axiosInstance.interceptors.request.use(config => {

// console.log( config )

// return，就是放行，否则就一直拦截

return config

}, err => {

console.log(err)

})

// 响应的拦截

axiosInstance.interceptors.response.use(config => {

// 在这里，添加对应的逻辑，例如一些筛选操作

// console.log( config )

// return，就是放行，否则就一直拦截

return config

}, err => {

console.log(err)

console.log(err.response.status)

switch (err.response.status) {

case 404:

err.message = '请求错误，接口链接有问题'

// 还有很多状态码，500、302、300...非常多，

// 都可以像404这么去写，

}

})

// 对外的公开方法

function requestFn(_config) {

let { url, data, method } = _config;

url = url || ''

data = data || {}

method = method || 'get'

switch (method) {

case 'get':

return axiosInstance.get(url, { params: data })

case 'post':`

// return post的内容

return axiosInstance.post(url, { params: data })

default:

// return 默认情况

}

}

export default requestFn

封装了axios功能的模块，用于发起HTTP请求。创建了一个axios实例，并设置了基本的URL前缀为'/api'。同时，还定义了请求和响应的拦截器，可以在请求发送前和响应返回后进行一些处理。提供了一个公开的方法requestFn，用于发起GET或POST请求。

在项目的脚本中引入

import axios from 'axios'

import requestFn from '@/utils/https'

使用Vue.js的响应式数据（reactive）来创建一个对象，该对象有一个属性arr，其初始值为空数组。之后尝试使用axios库发送一个GET请求到'/api/...'，并将返回的数据赋值给对象数组

let goodsTypeDataobj = reactive({arr:[]}); axios.get('/api/goodsTypeData') .then(d => { //console.log(d.data); goodsTypeDataobj.arr = d.data; });

3.封装底部导航栏

待更新