1. iview的应用:
npm install --save iview
然后在main.js中引入以下即可:
import iView from 'iview'
import 'iview/dist/styles/iview.css';
Vue.use(iView)
2. vue中搭建node后台;
步骤一:安装Express等第三方模块框架包:npm install --save express/body-parser/cookie/swig/mysql/markdown/http-server,在package.json中生成
步骤二:在项目下创建文件node及文件夹app.js
步骤三:在app.js中,
const express = require("express");
var app=express();
app.listen(3000);
app.get("/",(req,res)=>{
res.send("<h1>run app.js在浏览器中打开localhost:3000测试时候显示h1内容</h1>")
})
步骤四:运行node(如hbuilder->工具->插件->nodeclipse安装)然后在浏览器中输入http://localhost:3000/ 测试是否node运行成功
步骤五:
//0.加载对应模块http,express,mysql,bodyParser(处理post请求参数)
const express = require("express");
const mysql = require("mysql");
const bodyParser = require("body-parser");
//2:创建连接池
var pool = mysql.createPool({
host:"127.0.0.1",
user:"root",
password:"",
database:"boke",
port:3306,
connectionLimit:25
});
//3:创建服务器 3001
var app=express();
app.listen(3001);
//4:配置 body parser处理post请求参数
app.use(bodyParser.urlencoded({extended:false}));
//5.设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
//6.接受vue发生的axios
app.post("/login",(req,res)=>{
res.send("这是vue向node发送ajax请求/login页面后返回给vue的数据")
})
步骤六:vue发送ajax(axios)
axios.post('http://127.0.0.1:3001/login', {
uname: a,
upwd: b
})
.then(function (response) {
console.log(response);
console.log("成功")
})
.catch(function (error) {
console.log(error);
console.log("识别")
});
3. 解决axios传参格式不对:node不能准确接受到参数的问题
var qs = require('qs');
axios.post('/login', qs.stringify({ 'uname': "Ace" ,'upwd':"123456"}));
4. 在xampp里的htdocs里存放boke.sql,通过xampp打开mysql,默认端口3306;在xampp的admin打开http://localhost/phpmyadmin/import.php导入boke.sql即可
5.this.$router.push({name:"index",params:{nameVal:data.data}}); 带参数跳转
由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。this.$route.params.uname接受参数
6. 终止端口:端口被占用报错:listen EADDRINUSE :::3001;
解决:参考网站https://blog.csdn.net/masko123/article/details/54375007
7.Vue 将后台传过来的 带html字段的字符串 转换为 HTML:如:"</p>将字符串转换为html</p>"
解决:<div class="box-text" v-html="item.txt">
{{item.txt}}
</div>
8. npm下载echarts:
npm install echarts --save
var echarts = require('echarts');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
9. arr数组的倒叙:arr.reverse(),前提是arr !=[],否则报错