moxiao_lmx

moxiao_lmx 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

moxiao_lmx 提出了问题 · 4月3日

解决接口测试问题,node写的后端接口,启动项目,浏览器能看到返回的字符串,postman测试返回一个错误的html代码?

练习前后端数据请求的时候,先用前端请求了网上免费接口,没问题数据拿到了。

测试本地后端接口,localhost:3000/users (这个是express项目生成时自带的router)

1、user.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('12344');
});

module.exports = router;

2、app.js(截取的,就是express项目生成时的代码)

var usersRouter = require('./routes/users');
app.use('/users', usersRouter);

3、用npm start启动项目,浏览器访问localhost:3000/users可以显示send的字符串
image.png

4、用postman测试localhost:3000/user接口,会返回一个显示错误信息的html结构
image.png
image.png

问:为什么两个测试方法结果不一样?

前端代码(只修改main.js和HelloWorld.vue)

index.js里添加

proxyTable: {
      '/api': {
        target:'http://localhost:3000/',
        changeOrigin:true, 
        pathRewrite:{  
          '^/api': '' 
        }
      }
    },

main.js

import Vue from 'vue'
import App from './App'
import axios from 'axios'

Vue.prototype.axios = axios
Vue.config.productionTip = false

new Vue({
 el: '#app',
 components: { App },
 template: '<App/>'
})

app.vue(原封不动)
HelloWorld.vue


<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
  //请求的接口
    this.axios.get("/api/users").then((res)=>{
      console.log(res);
    })
    
  }
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

访问localhost:8080,能拿到send的字符串了
image.png
控制台显示
image.png
但是再它返回的信息中有个
image.png
responseURL是响应的地址吧?不应该是localhost:3000响应的么?
api不是自动替换成localhost:3000么?

关注 3 回答 3

moxiao_lmx 回答了问题 · 3月23日

解决node执行js文件时 把文件拉入命令行执行报错?

哦。。。运行文件不需要进入node环境,直接node xx.js

关注 1 回答 1

moxiao_lmx 提出了问题 · 3月22日

解决node执行js文件时 把文件拉入命令行执行报错?

node安装路径已经在系统环境变量中

打开powershell默认目录是C:\User\Adaministrator>

进入node运行环境后把要执行的文件拉入命令行

回车后报错

image.png

然后我直接进入js文件所在目录下执行
依然报错

image.png

但是在VSCode里执行就没问题

image.png

这是为什么?

关注 1 回答 1

moxiao_lmx 提出了问题 · 3月21日

解决express初始化项目完成后启动项目打开浏览器显示NotFound?

用express初始化项目以后,什么都没改先启动一下项目npm start
打开浏览器localhost:3000能正常访问并显示

然后学着连接数据库读取数据。
用node命令运行了一下程序,连接并读取了数据。

想在浏览器里看看效果,但是再启动就报NotFound?
image.png

app.js的代码(这里代码都没动)

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/index',indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

serverroutesindex.js的代码

var express = require('express');
var router = express.Router();

const conn = require('../db');

conn.query('select * from city where id=1',function(err,rows,fields){
  if(err){
    console.log('[query]-'+err);
    return;
  }else{
    console.log("连接成功");
  }  
  console.log(rows[0]);
  //console.log(fields);
})
//关闭connection
conn.end(function(err){
  if(err)
    return;
  console.log('[connection end] succeed!');
})

/* GET home page. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

db.js的代码(db.js跟app.js在同一目录下)

const mysql=require('mysql');

const conn=mysql.createConnection({
    host:'127.0.0.1',
    user:'root',
    password:'123456',
    database:'world',
    multipleStatements:true
});

conn.connect();

module.exports=conn;

并且访问users没问题!
localhost:3000/users
image.png
为什么访问index找不到?

关注 2 回答 1

moxiao_lmx 赞了回答 · 3月17日

解决vue-cli创建的项目index.html和main.js关系?

1.main.js是webpack打包的入口,最终会生成vendors.js、app.js(chunk?)等。由html-wepack-plugin帮你插入到index.html.所以html相当于模板
2.vue的初始化有一段白屏时间,是比html直接渲染要慢的,所以你会看到这串数字会先出现
3.config不知道你指什么,这一般是项目中的环境配置,dev prod等。或者是注入到webpack的自定义配置
4.webpack-config.js和vue-config.js在你需要的时候创建,vcli新版已经简化了对webpack的配置,同时开放出vue-config.js给特殊需要

//例如vue-config.js
module.exports = {
  configureWebpack: {
    devtool: "source-map",
    plugins: plugins
  },
  devServer: {
    watchOptions: {
      poll: true
    },
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3001"
      }
    }
  }
};

5.vue-resource不再维护,建议使用axios

关注 2 回答 1

moxiao_lmx 提出了问题 · 3月16日

解决vue-cli创建的项目index.html和main.js关系?

1、大体知道是index.html>main.js>App.vue>单页面组件/路由>单页面组件
但是index.html里没有引入main.js的代码,它们怎么联系起来的?

2、index.html里的内容会被App.vue内容覆盖,我在index.html里写一串数字,刷新页面时,这串数字会出现一次再跳转到目标页面。为什么会出现?

3、router下index.js是管理路由的,那config下的index.js是干嘛的?

4、webpack-config.js和vue-config.js每次都需要手动创建么?

5、是不是最好用axios替换vue-resource?

关注 2 回答 1

moxiao_lmx 提出了问题 · 3月14日

用vue-resource访问本地json为什么找不到?

项目结构如下
图片.png
代码如下

methods:{
    post : function(){
      console.log("submit");
        this.$http.post("static/test.json").then(function(data){
        console.log(data);
      })
      
    }
  }

浏览器控制台报错如下
图片.png
访问网上的免费接口能获得数据,访问本地json就报错。哪里写错了?

关注 1 回答 0

moxiao_lmx 提出了问题 · 3月11日

js写的扫雷,连续刷新会出现几次Uncaught TypeError。这是什么原因?

连续刷新会产生如下结果。。。
第一次
image.png
第二次
image.png
第三次
image.png
第四次
image.png
第五次
image.png

看代码index.html

<body>
    <script data-original="index.js"></script>
</body>

index.js

var game = [];
var size = 10;//游戏界面大小
var boomNum = 10;//炸弹数量
var boomPoint = [];
//用for循环创建游戏界面
for(let i=0;i<size;i++){
    //游戏界面是二维数组
    game.push(
        //Array是数组构造器
        //Array(10)是创建一个长度为10的空数组
        //fill(arg)以参数来填充数组
        Array(size).fill(0)
    );
}
//初始化炸弹位置
function initBoom(){
    //当前放置的炸弹数
    var nowBoomNum = 0;
    //随即坐标(x,y)
    var randomX,randomY;
    //当前炸弹数小于目标炸弹数找随机位置
    while(nowBoomNum<boomNum){
        randomX = parseInt(Math.random()*size);  
        randomY = parseInt(Math.random()*size);
        if(game[randomX][randomY]===0){
            //炸弹标志数字大于8即可
            game[randomX][randomY] = 9;
            nowBoomNum++;
            boomPoint.push([randomX,randomY]);
        } 
    }
}

//初始化炸弹周围的数字
function initDispalyNum(){
    while(boomNum--){
        var [boomX,boomY]=boomPoint[boomNum];
        for(var x = boomX - 1 ; x <= boomX + 1 ; x++){
            if(x<0||x>size){
                continue;
            }
            for(var y=boomY-1;y<=boomY+1;y++){
                if(y<0||y>size-1||game[x][y]===9){
                    continue;
                }
                 game[x][y]++;
            }
        }
    }
}

initBoom();
initDispalyNum();
console.log(game);
console.log(boomPoint);

既能正常显示,又会偶尔报错?!为什么?

关注 1 回答 0

moxiao_lmx 提出了问题 · 2019-12-22

解决vue遍历对象数组取到的不是对象值,是整个对象?

对象数组

data :{
    arr:[{a:"aaa"},{a:"bbb"}]
    }`

html里

<div v-for="(val,key,index) in arr">
    {{val}},{{key}},{{index}}
</div>

val显示的是

       {a:"aaa"}
       {a:"bbb"}

key显示的是下标数 0 1
index无值
web开发模式下看arr是
2019-12-22_152227.png
下标做对象的key,整个对象是value
现在想取每个对象的key和value怎么写?

关注 3 回答 2

moxiao_lmx 提出了问题 · 2019-12-22

解决用Vue怎么实现鼠标滑过一级导航,显示二级菜单?

实现像淘宝左侧导航一样的效果。
二级菜单数据存在json文件中。
用Vue怎么实现?(不涉及vue-cli的)
2019-12-22_095158.png

关注 4 回答 4

认证与成就

  • 获得 0 次点赞
  • 获得 8 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 7 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-01-07
个人主页被 99 人浏览