文档章节

vue+elementUI框架,nodejs+router搭建本地服务器,数据库用mongoose,axios请求碰到的一些问题

o
 osc_y8yehimr
发布于 2019/03/20 15:31
字数 643
阅读 13
收藏 0

精选30+云产品,助力企业轻松上云!>>>

在做这个项目练手时碰到的一些问题记录一下,加深印象

服务器的目录层级如下:

 

一、简单的搭建一个服务器,如何划分路由

1.在搭建好的后端服务器  app.js 中导入路由,代码如下:

var express = require('express')

// 导入路由  用户
var user = require('./router/user.js')    

var app = express()

app.use(express.static('public'))

// 在路由配置前添加以下代码  解决跨域问题
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    next();
});

app.use('/user',user);    //挂载路由,如果没有路由,或者只有/ ,映射到index路由

app.listen(3000, () => {
    console.log('Server Running...')
})

2.路由页面  user.js 代码如下:

var express = require('express');

// 导入 mongoose 数据库
var User = require('../mongoose/mongoose.js')

var router = express.Router();

router.get('/register',function(req, res, next) {
    console.log(req)
    res.send('请求数据成功')
})

module.exports = router;

二、如何引用数据库

在上述步骤当中,在 user.js 内已经导入mongoose 数据库,现在挂上数据库 mongoose。js 文件代码如下:

var mongoose = require("mongoose")

// mongoose.connect('mongodb://数据库的ip地址:端口号/数据库名');
mongoose.connect('mongodb://localhost:27017/txl')

// 通过Schema来创建Model
// Model代表的是数据库中的集合(users),通过Model才能对数据库进行操作
// mongoose.model(modelName,schema) (集合名,Schema)
// modelName 就是要映射的集合名,mongoose会自动将集合名变成复数
var Schema = mongoose.Schema;

// 定义一个user的Schema
var UserSchema = new Schema({          
    username : { type: String },                // 用户账号
    password: { type: String },                 // 密码
    email: { type: Number },                    // 邮箱
    birthday : { type: Date },                  // 出生年月
    qq : { type: String },                      // QQ
    tel: { type: String },                      // 手机
    gender : { type: String },                  // 性别
    signature : { type: String }                // 个性签名
});

// 监听连接状态
mongoose.connection.on('connected', function () {    
    console.log('Mongoose connection open to ' + 'mongodb://localhost:27017/txl...');  
});    
mongoose.connection.on('error',function (err) {    
    console.log('Mongoose connection error: ' + err + '...');  
});    
mongoose.connection.on('disconnected', function () {    
    console.log('Mongoose connection disconnected...');  
});  

// 对上面的定义的user的schema生成一个User的model并导出
module.exports = mongoose.model('User',UserSchema);

三、前端页面发送数据请求

1. npm i axios

2. 在 main.js 中插入如下代码:

// axios 发送请求
import axios from 'axios'
Vue.prototype.$ajax = axios

3. 在所需页面使用 axios 发送数据请求

this.$refs[formName].validate((valid) => {
    if (valid) {
        this.$ajax.get('/user/register', { data }).then((resData) => {
          console.log(resData)
        })
    } else {
      return false
    }
})

4.做好这些之后,会报错

因为 vue 是 8080 的端口,而本地服务器是 3000 的端口,存在跨域问题,解决这个问题要在 vue项目 config 文件夹下的 index.js 文件内进行配置

找到 proxytable属性,进行如下配置:

proxyTable: {
    '/':{
        target:'http://127.0.0.1:3000',
        changeOrigin: true
    }
},

打开界面,发送请求显示

则服务器代理成功

 

  

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
记一次全栈项目学习经历

前记 在学习vue的路上从开始看api到写了几个小项目后,对vue有了一定的了解,但是一直没做过全栈类的项目。这次跟着慕课的视频做了个完整的全栈类项目,特此一记,来巩固下知识! 技术 前端 ...

不发光的石头
2018/07/11
0
0
nodejs项目总结

前几天花了3天时间,搭建、开发了一个包含客户端、cms、server端的项目,也因着以前有php的开发经验,以及sql的设计和应用能力,倒也没遇到什么阻碍。至于项目结构搭建(架构),也是共通的,...

osc_p8zyme9p
2018/02/12
2
0
Vue nodejs商城项目- 前后端数据传递

1、利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mondodb中获取数据,首先安装mongoose: cnpm install mongoose --save 使用mongoose需要一个模式Schema,它用于定义你从mongodb中...

osc_jww09jef
2018/06/28
10
0
Vue node.js 前后端数据传递

1、利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mongodb中获取数据,首先安装mongoose: cnpm install mongoose --save 使用mongoose需要一个模式Schema,它用于定义你从mongodb中...

osc_h9x23mw1
2019/12/07
3
0
VUE+ElementUI 搭建后台项目(一)

前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用v...

osc_2btjzrrn
2019/05/11
3
0

没有更多内容

加载失败,请刷新页面

加载更多

我们一定会在人生的更高处相见的

2020.6.7 我知道没人会看到 2021.6.7 我再来写下 每天进步一点点 一年后我就是不一样的我 你也是。 高考加油!

osc_9oidllr2
10分钟前
0
0
esp8266物联网开发一:MicroPython初战江湖

用esp8266做的物联网开发,涉及到固件烧写,固件擦除,代码编写等方面,做一一记录。 1. 固件烧写 首先,下载固件烧写工具:https://www.espressif.com/sites/default/files/tools/flash_dow...

osc_s2b5kacl
11分钟前
8
0
获小黄衫有感

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/2020SpringW/ 一、与软工的开始 在选课的时候咨询学长意见,听上届学长说这门课会有寒假作业,心里很忐忑,又抱有侥幸心理——可能...

osc_r5t7sskd
12分钟前
0
0
ppt 视频不显示控制条

1 正常解决方法 2 如果还不能显示可能是ppt是兼容模式,另存为非兼容模式就好了 后缀是.ppt 现存就好了

osc_hzf6peqc
13分钟前
3
0
五笔经常打不出来的字:温故而知新

遍 ynmp 凸凹 hgmm 凸 hgm 凹mmgd

osc_iy56i6w3
15分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部