商城后台管理系统 07 商品列表-分页实现

生命周期函数

created() {
	this.$api.getGoodsList({
		page: 1
	})
	.then(res => {
		console.log(res.data);
	})
}

vue.config.js 解决跨域问题

// 配置参数
/**
 * devServer.proxy
 * 如果你的前端和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下降 API 请求* 做跨域处理
 */
module.exports = {
	devServer: {
		proxy: {
			'/api': {
				target: 'http://localhost:8989',
				ws: true,
				changeOrigin: true,
				pathRewrite: { // 重写路径
					'^/api': ''
				}
			}
		}
	}
}

src/api/index.js 所有方法的配置

/**
 * 所有请求的方法
 */

import axios from "axios";
import base from "./base";
const api = {
	/**
	 * 商品列表
	 */
	getGoodsList(params) { // {page:xx}
		return axios.get(base.goodsList, {
			params
		});
	}
}

export default api;

src/api/base.js 所有路径的配置

/**
 * 接口的路径配置:
 * 一般文件目录: base.js index.js
 * 	base.js : 放所有路径的配置
 *  index.js: 放所有请求的方法
 */

const base = {
	goodsList: '/api/api/projectList', // 商品列表
}

export default base;

查询的接口(后端代码)

router.get('/search', (req, res) => {
	var search = req.query.search;
	const sql = "select * from project where concat(`title`,`sellPoint`,`descs`) like '%' " + search
	sqlFn(sql, null, (result) => {
		if (result.length > 0) {
			res.send({
				status: 200,
				data: result
			})
		} else {
			res.send({
				status: 500,
				msg: '暂无数据'
			})
		}
	})
})

商品列表接口(后端代码)

router.get('/projectList', (req,res) =>{
	const page = req.query.page || 1;
	const sqlLen = "select * from project where id";
	sqlFn(sqlLen, null,data => {
		let len = data.length;
		const sql = "select * from project order by id desc limit 8 offset" + (page-1) * 8;
		sqlFn(sql, null, result => {
			if (result.length > 0) {
				res.send({
					status: 200,
					data: result,
					pageSize: 8,
					total: len
				})
			} else {
				res.send({
					status: 200,
					msg: "暂无数据"
				})
			}
		})
	})
})

server/mysql.js

server/index.js