问题描述：
现在有一个vue2+element UI的前端项目，用sqlite简单了搭建一个数据库，但是怎么将他们用js连接呢？
首先npm install sqlite~上网上搜下一大堆。
- 发现了一个开源的项目，使用了Vue.js + Element UI + Express + axios + SQLite3.比较一下它和我的项目的异同：
https://github.com/shawvey/The-Weather-Helper如果github登不上可以git clone https://gitee.com/liu-qiuqi/The-Weather-Helper.git
(o゜▽゜)o☆这里这是gitee里的。
我的项目目录：
Weather-Helper的App.vue和main.js对应我的项目中pages的每个文件夹里的vue和js
main.js:
import Vue from 'vue';
import App from './App';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import SIdentify from './components/page/Identify';
import "babel-polyfill";
import axios from 'axios';
Vue.use(axios);
Vue.component("SIdentify",SIdentify);
Vue.use(ElementUI);
Vue.use(axios);
new Vue({
router,
render: h => h(App)
}).$mount('#app');
App.vue
<template>
<div id="app">
<router-view>router-view>
div>
template>
<style>
@import "../static/css/main.css";
@import "../static/css/color-dark.css";
style>
/components/page/Login.vue
<template>
<div class="login-wrap">
<div class="ms-title">Logindiv>
<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<div v-if="errorInfo">
<span>{{errInfo}}span>
div>
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="Username" >el-input>
el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="Password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">el-input>
el-form-item>
<el-form-item prop="validate">
<el-input v-model="ruleForm.validate" class="validate-code" placeholder="" >el-input>
<div class="code" @click="refreshCode">
<s-identify :identifyCode="identifyCode">s-identify>
div>
el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">Submitel-button>
div>
<p class="register" @click="handleCommand()">Create an Accountp>
el-form>
div>
div>
template>
<script>
import axios from 'axios';
export default {
name: 'login',
data() {
return {
identifyCodes: "1234567890",
identifyCode: "",
errorInfo : false,
ruleForm: {
name: '',
password: '',
validate: ''
},
rules: {
name: [
{ required: true, message: 'please enter username', trigger: 'blur' }
],
password: [
{ required: true, message: 'please enter password', trigger: 'blur' }
],
validate: [
{ required: true, message: 'please enter verification code', trigger: 'blur' }
]
}
}
},
mounted() {
this.identifyCode = "";
this.makeCode(this.identifyCodes, 4);
},
methods: {
submitForm(formName) {
const self = this;
self.$refs[formName].validate((valid) => {
if (self.ruleForm.validate != this.identifyCode){
alert('Please enter true verification code!')
}
else if (self.ruleForm.validate== this.identifyCode) {
axios.post('/api/user/login',JSON.stringify(self.ruleForm))
.then((response) => {
console.log(response);
if (response.data == -1) {
self.errorInfo = true;
self.errInfo = 'no such user';
console.log('Invalid username or password.')
} else if (response.data == 0) {
console.log('Invalid username or password.')
self.errorInfo = true;
self.errInfo = 'Invalid username or password.';
} else if (response.status == 200) {
sessionStorage.setItem('ms_userId',self.ruleForm.name);
sessionStorage.setItem('ms_username',self.ruleForm.name);
sessionStorage.setItem('ms_user',JSON.stringify(self.ruleForm));
self.$router.push('/readme');
console.log(JSON.stringify(self.ruleForm));
}
}).then((error) => {
console.log(error);
})
} else {
console.log('error submit!!');
return false;
}
});
},
handleCommand() {
this.$router.push('/register');
},
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
refreshCode() {
this.identifyCode = "";
this.makeCode(this.identifyCodes, 4);
},
makeCode(o, l) {
for (let i = 0; i < l; i++) {
this.identifyCode += this.identifyCodes[
this.randomNum(0, this.identifyCodes.length)
];
}
}
}
}
script>
service文件夹里
app.js
const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded())
app.use('/api/user', userApi);
app.listen(3000);
console.log('success listen at port: 3000')
userApi.js
var express = require('express');
var router = express.Router();
var $sql = require('../db/sqlMap');
const sqlite3 = require('sqlite3').verbose();
var jsonWrite = function(res, ret) {
if(typeof ret === 'undefined') {
res.send('err');
} else {
console.log(ret);
res.send(ret);
}
}
var dateStr = function(str) {
return new Date(str.slice(0,7));
}
router.post('/login', (req, res) => {
let db = new sqlite3.Database('./db/DB.db', (err) => {
if (err) {
console.error(err.message);
}
console.log('Connected to the database.');
});
var sql_name = $sql.user.select_name;
var params = req.body;
var keywords = JSON.parse(Object.keys(params));
console.log(keywords);
if (keywords.name) {
sql_name += "where username ='"+ keywords.name +"'";
}
db.get(sql_name, function(err, result) {
if (err) {
console.log(err);
}
if (result === undefined) {
res.send('-1')
} else {
if(result.password === keywords.password) {
jsonWrite(res, result);
} else {
res.send('0')
}
}
})
db.close();
});
module.exports = router;
因为Weather的配置是由config、build、package.json共同设置的，但是我的这个项目里只有vue.config.js和package.json,所以比较后我将vue.config.js改成了这样：
let pageMethod = require('./src/util/getPages.js');
let pages = {}
pages = pageMethod.pages();
module.exports = {
pluginOptions: {
webpack: {
dir: [
'./webpack'
]
}
},
lintOnSave: false,
productionSourceMap: false,
pages,
devServer: {
index: 'Login.html',
open: process.platform === 'darwin',
host: '',
port: 8080,
https: false,
hotOnly: false,
proxyTable: {
'/api':{
target: 'http://127.0.0.1:3000/api/',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
}
}
根据上面一通照葫芦画瓢后——发现没连上😓
应该是配置文件出现了问题，”前端向什么地址发送请求”怎么配置呢？
我查到有一篇博客讲解了vue.config.js（我的）和webpack（Weather-Helper所用的那种方式的配置文件）的区别：这里👀
发现没有错，就是用proxy,上面是没有改过来把proxy写成了proxyTable,可恶🤢，正确的在下面:
let pageMethod = require('./src/util/getPages.js');
let pages = {}
pages = pageMethod.pages();
module.exports = {
pluginOptions: {
webpack: {
dir: [
'./webpack'
]
}
},
lintOnSave: false,
productionSourceMap: false,
pages,
devServer: {
index: 'Login.html',
open: process.platform === 'darwin',
host: '',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/api':{
target: 'http://127.0.0.1:3000/api/',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
}
}
又出现了问题~心累：启动项目后报错status:500发现传到后端的数据长这样：（如下req.body）terminal里显示SyntaxError: Unexpected end of JSON input at JSON.parse ()
req.body:
{ ‘{“account”:”001″,”password”:”123456″,”checked”:’: [ ” ] }
解决方案：
简单实现了用户登录总的来说后端是这样配置的：
- 步骤一：将Weather-Helper里的service文件夹复制到项目根目录（src所在目录），用数据库管理工具（可以从这里下载SqliteAdministrator，链接：https://pan.baidu.com/s/1GwrPq9RBt4Rre2SzV-wlUg 提取码：7wll）新建一个数据库User表。将后缀为s3db的数据库文件保存在/service/db里。
- 步骤二：修改/service/app.js
const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded())
app.use('/api/user', userApi);
app.listen(3000);
console.log('success listen at port: 3000')
- 步骤三：修改service/db/sqlMap，改成你需要的sqlite语句。👀这里是sqlite语句教程
var sqlMap = {
user: {
add: 'INSERT INTO User [(account, password, portrait,realname,phone)] VALUES',
select_account: 'SELECT * FROM User',
update_user: 'UPDATE User SET'
}
}
module.exports = sqlMap;
- 步骤四：创建/修改/service/api/xxApi.js
我将userApi改成了这样
var express = require('express');
var router = express.Router();
var $sql = require('../db/sqlMap');
const sqlite3 = require('sqlite3').verbose();
var jsonWrite = function(res, ret) {
if(typeof ret === 'undefined') {
res.send('err');
} else {
console.log(ret);
res.send(ret);
}
}
var dateStr = function(str) {
return new Date(str.slice(0,7));
}
router.post('/login', (req, res) => {
let db = new sqlite3.Database('./db/IIs.s3db', (err) => {
if (err) {
console.error("!!!!")
console.error(err.message);
}
console.log('Connected to the database.');
});
var sql_account = $sql.user.select_account;
var params = req.body;
var keywords = JSON.parse(Object.keys(params));
console.log(keywords);
if (keywords.account) {
sql_account += " where account ='"+ keywords.account +"'";
}
db.get(sql_account, function(err, result) {
if (err) {
console.log(err);
}
if (result === undefined) {
res.send('-1')
} else {
if(result.password === keywords.password) {
jsonWrite(res, result);
} else {
res.send('0')
}
}
})
db.close();
});
module.exports = router;
- 步骤五：修改根目录下的vue.config.js文件，没有的话创建一个（👀参考这里）：
let pageMethod = require('./src/util/getPages.js');
let pages = {}
pages = pageMethod.pages();
module.exports = {
pluginOptions: {
webpack: {
dir: [
'./webpack'
]
}
},
lintOnSave: false,
productionSourceMap: false,
pages,
devServer: {
index: 'Login.html',
open: process.platform === 'darwin',
host: '',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/api':{
target: 'http://localhost:3000/api/',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
}
}
如果项目目录和Weather-Helper相似那么配置文件直接参考它的就行啦！
- 在/src/pages/Login/Login.vue里：
<template>
<div id="login">
<div class="login-box">
<div id="normalLoginTab" class="loginForm" style="display: block">
<h2 class="loginbox-title">帐号登录h2>
<div class="loginUrs" style="height: 302px">
<div class="g-bd">
<el-form
ref="Loginform"
:model="user"
style="width: 70%; margin: auto"
>
<el-form-item>
<el-input v-model="user.account" placeholder="请输入账号" style="height: 40px; line-height: 40px;" />
el-form-item>
<el-form-item>
<el-input
v-model="user.password"
placeholder="请输入密码"
show-password
/>
el-form-item>
<el-form-item style="margin-top: -20px">
<el-checkbox v-model="checked" type="check"
>记住密码el-checkbox
>
<router-link
to="/"
style="
margin-left: 175px;
text-decoration: none;
color: #42a5eb;
"
>忘记密码？router-link
>
el-form-item>
<el-form-item style="margin-top: -30px">
<el-button type="goon" @click="doLogin()"
>登入el-button
>
el-form-item>
el-form>
div>
div>
div>
div>
div>
template>
<script>
import qs from "qs";
import axios from "axios";
export default {
data() {
return {
user: {
account: "",
password: "",
portrait:"",
realname:"",
phone:""
},
checked: [],
errorInfo : false,
errInfo:"",
rules: {
account: [
{ required: true, message: 'please enter username', trigger: 'blur' }
],
password: [
{ required: true, message: 'please enter password', trigger: 'blur' }
]
}
};
},
methods: {
doLogin() {
const self = this;
if (!self.user.account){
alert('Please enter an account!')
}
else if(!self.user.password){
alert('Please enter a password!')
}
else if(self.user.password&&self.user.account){
var dataa={account:this.user.account,password:this.user.password}
axios.post('/api/user/login',JSON.stringify(dataa))
.then((response) => {
if (response.data == -1) {
self.errorInfo = true;
self.errInfo = 'no such user';
console.log('Invalid username or password.')
} else if (response.data == 0) {
console.log('Invalid username or password.')
self.errorInfo = true;
self.errInfo = 'Invalid username or password.';
} else if (response.status == 200) {
var datab=response.data
sessionStorage.setItem('ms_account',self.user.account);
sessionStorage.setItem('ms_password',self.user.password);
sessionStorage.setItem('ms_user',JSON.stringify(datab));
}
}).then((error) => {
console.log(error);
})
} else {
console.log('error submit!!');
return false;
}
}
},
};
script>
<style scoped src="../../style/Login.css">style>
登陆成功后将用户信息存入sessionStorage，👀有关sessionStorage
Original: https://blog.csdn.net/liquiior/article/details/122754801
Author: liquiior
Title: vue2+element UI+axios+sqlite连接本地数据库
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/815423/
转载文章受原作者版权保护。转载请注明原作者出处！