开发记录
XShell连接阿里云Linux操作系统
- 新建会话
网络异常，图片无法展示|
网络异常，图片无法展示| - 双击连接
网络异常，图片无法展示|
安装MySQL
- 在root目录下创建temp目录用于存放压缩包
mkdir temp - 移动到temp下
cd temp - 安装lresz
yum install lrzsz -y - 将下载好的压缩包传入temp
rz - 解压
tar -zxf mysql-5.7.27-linux-glibc2.12-x86_64.tar.gz - 移动到
/usr/local/mysqlcp mysql-5.7.27-linux-glibc2.12-x86_64 /usr/local/mysql -r - 创建mysql用户组
groupadd mysql - 创建mysql用户
useradd -r -g mysql mysql - 在mysql目录下授权用户组和用户
cd /usr/local/mysqlchgrp -R mysql .//最后的.是指对当前目录授权chown -R mysql . - 初始化
./mysqld --initialize --user=mysql --basedir=/usr/local/mysql/ --datadir=/usr/local/mysql/data/ --lc_messages_dir=/usr/local/mysql/share --lc_messages=en_US
网络异常，图片无法展示|
注意: 一定要保留初始密码用于第一次登录 - 复制启动文件到服务文件夹(support-files)
cp mysql.server /etc/init.d/mysqlcp mysql.server /etc/init.d/mysql - 启动mysql
service mysql start
设置开机自启动:systemctl enable mysql - 登录mysql
mysql -u root -p//输入刚才初始化时的密码 - 进入mysql后设置密码
set password=password("密码"); - 关闭防火墙
service firewalld stop - 设置可通过任意方式访问
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '密码' WITH GRANT OPTION; navicat配置连接（连接失败）- 这里跟虚拟机不一样，需要在阿里云控制台配置安全组
网络异常，图片无法展示|
选择快速添加，选择3306和22进行添加
- 再次进行
navicat连接
到这里数据库远程连接就完成了。
Vue CLI
快速开发
只需要一个App.vue，对单个文件实现快速开发。
vue serve与vue build
vue + mysql
- 根据下方vue.sql文件写入数据
启动Linux端后开启以下端口:
22:服务端口号
8080:服务器端口号
3306:数据库端口号
3000:服务器端口号
安装异步加载依赖:npm install vue-resource --save
安装中间件依赖:cnpm install express mysql body-parser
将数据库文件写入mysql数据库:
初始化
配置 db.js :数据库配置
// 数据库配置文件
module.exports= {
mysql:{
host:'192.168.***.***',
user:'root',
password:'******',
database:'vue',
port:'3306'
}
}
数据库连接实现增删改查
在接口文件 /api/userApi.js 中设置增删改查接口.
varmodels=require('../db');
varexpress=require('express');
varrouter=express.Router();
varmysql=require('mysql');
// 连接数据库
varconn=mysql.createConnection(models.mysql);
conn.connect();
varjsonWrite=function(res, ret) {
if(typeofret==='undefined') {
res.json({
code: '1',
msg: '操作失败'
});
} else {
res.json(ret);
}
};
// 增加用户接口
router.post('/addUser', (req, res) => {
varparams=req.body;
varsql='insert into user(username, password) values (?, ?)';
console.log(params);
conn.query(sql, [params.username, params.password], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
jsonWrite(res, result);
}
})
});
// 查询用户接口
router.post('/queryUser', (req, res) => {
varparams=req.body;
varsql=" select * from user where username = '"+params.username+"'";
console.log(params);
conn.query(sql, [params.username], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
console.log(res);
jsonWrite(res, result);
}
})
});
// 修改用户接口
router.post('/updateUser', (req, res) => {
varparams=req.body;
varsql=" update user set password = '"+params.password+"' where username = '"+params.username+"'";
console.log(params);
conn.query(sql, [params.username], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
console.log(res);
jsonWrite(res, result);
}
})
});
// 删除用户接口
router.post('/deleteUser', (req, res) => {
varparams=req.body;
varsql=" delete from user where username = '"+params.username+"'";
console.log(params);
conn.query(sql, [params.username], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
console.log(res);
jsonWrite(res, result);
}
})
});
module.exports=router;
后端服务器
// node 后端服务器
constuserApi=require('./api/userApi');//接口
constfs=require('fs');
constpath=require('path');//路径
constbodyParser=require('body-parser');//中间件
constexpress=require('express');
constapp=express();
app.use(bodyParser.json());//启用中间件
app.use(bodyParser.urlencoded({extended: false}));
// 后端api路由
app.use('/api/user', userApi);
// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');
根据四表修改查找功能
// 数据库接口, 实现数据增删改查
varmodels=require("../db");
varexpress=require('express');
varrouter=express.Router();
varmysql=require('mysql');
varconn=mysql.createConnection(models.mysql);
conn.connect();
varjsonWrite=function(res,ret){
if(typeofret=='undefined'){
res.json({
code:'1',
msg:"操作失败"
});
}else{
res.json(ret);
}
}
// 查询
router.post('/queryMsg',(req,res)=>{
varparams=req.body;
console.log(params)
varsql="SELECT * FROM "+params.table;
vardatas=[];
console.log(params);
// console.log(sql)
conn.query(sql,function(err,data,result){
if(err){
console.log("ERR:"+err);
return;
}
console.log(data);
res.json(data)
returndata;
})
});
module.exports=router;
//获取数据库列表信息并更新
<script>
exportdefault {
name: 'myHello',
data () {
return {
msg:[]
}
},
created(){
this.queryMsg()
},
methods:{
queryMsg(){
letthat=this;
this.$http.post('/api/user/queryMsg',{table:"学校新闻数据"},{})
.then((response)=>{
console.log(response);
that.msg=response.body;
})
}
}
}
</script>
问题
1.vue init webpack process无限download template问题
解决办法:
webpack版本过低，需要重装webpack
npm uninstall -g webapck
npm install -g webapck
2.eslint报错
解决办法:
在 /build/webpack.base.conf.js 中找到 createLintingRule 将内容注释掉
constcreateLintingRule= () => ({
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter'),
// emitWarning: !config.dev.showEslintErrorsInOverlay
// }
})
3.vue 界面加载同步渲染 created()
<script>
exportdefault {
name: 'myHello',
data () {
return {
msg:[]
}
},
created(){
this.queryMsg()
},
methods:{
queryMsg(){
letthat=this;
this.$http.post('/api/user/queryMsg',{table:"学校新闻数据"},{})
.then((response)=>{
console.log(response);
that.msg=response.body;
})
}
}
}
</script>
4.自定义表名
created(){
this.queryMsg({str:"专家介绍数据"})
},
methods:{
queryMsg(req){
letthat=this;
this.$http.post('/api/user/queryMsg',{table:req.str},{})
.then((response)=>{
console.log(response);
that.msg=response.body;
})
}
}
