iview---写个人博客boke-----遇到的问题及解决总结

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 !=[],否则报错

小蜜蜂

iview---写个人博客boke-----遇到的问题及解决总结