前置准备
1.新建项目并下载需要的插件
vue create search_demo（项目名）
详见vue项目创建的详细步骤，有需要的可移步这里
2.新建数据表
在mysql数据库中，新建一个数据库（test），在数据库中新建一张表（goods），表内有ID（int），name（varchar(50)），price（float），detail（varchar(200)）和type（varchar(50)）等属性。
数据库名、表名、属性可以不一样，只要在代码中修改成自己的信息即可
3.连接数据库
内容过多，本篇省略，有需要的可移步vue项目连接数据库并实现增删改查
注意：/server/db/index.js中的信息修改
let mysql = require('mysql')
let db = mysql.createPool({
host: '127.0.0.1', //数据库IP地址
user: 'root', //数据库登录账号
password: 'root', //数据库登录密码
database: 'test' //要操作的数据库
})
module.exports = db
正片开始
1.服务器配置
- 新建/server/API/goods.js，用于操作goods表
信息表和我不同的，这边的sql语句和传递的参数要记得修改
let db = require('../db/index')
exports.get = (req, res) => {
//多条件模糊查询
var sql = 'select * from goods where name like ? and price like ? and detail like ? and type like ?'
db.query(sql, [req.query.name, req.query.price, req.query.detail, req.query.type], (err, data) => {
if(err) {
return res.send('错误：' + err.message)
}
res.send(data)
})
}
exports.search = (req, res) => {
//全表模糊查询
var sql = 'select * from goods where name like ? or price like ? or detail like ? or type like ?'
db.query(sql, [req.query.search,req.query.search,req.query.search,req.query.search], (err, data) => {
if(err) {
return res.send('错误：' + err.message)
}
res.send(data)
})
}
exports.add = (req, res) => {
//添加
var sql = 'insert into goods (id,name,price,detail,type) values (?,?,?,?,?)'
db.query(sql, [req.query.id, req.query.name, req.query.price, req.query.detail, req.query.type], (err, data) => {
if(err) {
return res.send('错误：' + err.message)
}
res.send(data)
})
}
- 在/server/router.js中配置对应路由
let express = require('express')
let router = express.Router()
let goods= require('./API/goods')
router.get('/goods/get', goods.get)
router.get('/goods/search', goods.search)
router.get('/goods/add', goods.add)
module.exports = router
2.前端配置
- 在main.js中，导入axios
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios" //导入axios
import ElementUI from 'element-ui'; //导入elementui
import 'element-ui/lib/theme-chalk/index.css'; //导入elementui的css文件
Vue.config.productionTip = false
Vue.prototype.axios = axios //全局注册axios
axios.defaults.baseURL = 'http://127.0.0.1' //设置baseURL
Vue.use(ElementUI); //全局注册elementUI
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
- 前端页面搭建
本人很懒，懒得写样式，我知道页面很丑，但就是不想写，将就看吧_(:з」∠)_
本人直接用的elementUI组件，用前记得先下载、导入、注册
<template>
<div>
<el-table
:data="info"
height="350"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="商品名称"
width="180">
</el-table-column>
<el-table-column
prop="price"
label="价格"
width="180">
</el-table-column>
<el-table-column
prop="detail"
label="商品描述">
</el-table-column>
<el-table-column
prop="type"
label="商品类别"
width="180">
</el-table-column>
</el-table>
<div class="box">
<div class="left">
<el-input v-model="id" placeholder="请输入id" class="input"></el-input>
<el-input v-model="name" placeholder="请输入商品名称" class="input"></el-input>
<el-input v-model="price" placeholder="请输入价格" class="input"></el-input>
<el-input v-model="detail" placeholder="请输入商品详细信息" class="input"></el-input>
<el-input v-model="type" placeholder="请输入商品类型" class="input"></el-input>
<el-button type="success" @click="add">添加</el-button>
<el-button type="primary" @click="get">查询</el-button>
</div>
<div class="right">
<div class="container">
<form action="" class="parent">
<input type="text" class="search" placeholder="搜索" v-model="state">
<input type="button" class="btn" @click="search">
</form>
</div>
</div>
</div>
</div>
</template>
页面效果
- 对应的实现函数
<script>
export default {
data () {
return {
info: [],
id: '',
name: '',
price: '',
detail: '',
type: '',
state: '',
};
},
methods: {
add() {
//添加
this.axios.get('/goods/add', {
params: {
id: this.id,
name: this.name,
price: this.price,
detail: this.detail,
type: this.type
}
}).then(res => {
this.$message({
message: '添加成功',
type: 'success'
})
}).catch(err => {
console.log('操作失败:' + err);
})
},
get() {
//多条件模糊查询
this.axios.get('/goods/get', {
params: {
name: '%' + this.name + '%',
price: '%' + this.price + '%',
detail: '%' + this.detail + '%',
type: '%' + this.type + '%'
}
}).then(res => {
this.info = res.data
}).catch(err => {
console.log("操作失败：" + err);
})
},
search() {
//全表模糊查询
this.axios.get('/goods/search', {
params: {
search: '%'+this.state+'%'
}
}).then(res => {
this.info = res.data
}).catch(err => {
console.log("操作失败：" + err);
})
}
}
}
</script>
注意：数据表不同的，记得修改对应的参数
效果展示
数据表模糊查询