express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域

简介: express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域

代码在 ==》E:\nodes实战\myserve\testserve


1 express搭建后端请求路由,前端进行访问对应的接口


   1) 创建项目目录


       express 项目名 -e


       然后按照提示就可以了


       cd 项目名


   2) 进入项目 下载依赖


       cnpm i  


在下载过程中出现


New minor version of npm available! 6.11.2 -> 6.13.1      
        Changelog: https://github.com/npm/cli/releases/tag/v6.13.1   
        Run npm install -g npm to update!


(运行npm install-g npm进行更新!)

     

跟新就可以了


3)


在app.js 中 在(module.exports = app;前添加)就是在第40行 添加如下,监听端口

   

app.listen(666, () => {
            console.log('后端服务器启动成功,地址是: http://127.0.0.1:666')
        })


   4) 启动项目


       nodemon app


然后输入  http://127.0.0.1:666 就会出现界面



介绍一下后端的项目目录


bin


public


routes  路由接口


views


app.js文件


package.json 包描述文件


复制一份routes下的users.js文件,用来做account的请求 然后命名为account.js文件如下


{
    var express = require('express');
    var router = express.Router();
    // 统一设置响应头 解决跨域问题
    router.all("*", (req, res, next) => {
        // 设置响应头 解决跨域(目前最主流的方式)
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "authorization");
        next();
    });
    /* GET users listing. */
    router.get('/', function(req, res, next) {
    res.send('解决了跨域哈');
    });
    module.exports = router;
}
然后再app.js中去  给/test分配一个路由
vvar accountRouter = require('./routes/account');  //分配路由 在地10行
app.use('/account',accountRouter );      //使用路由 在第28行


然后在页面输入http://127.0.0.1:666/account  


就会出现 解决了跨域哈 说明路由配置成功


前端


created() {
    axios
      .get("http://127.0.0.1:666/account")
      .then(res => {
        this.mesg = res.data;
        window.console.log(res.data);//解决了跨域哈
      })
      .catch(err => {
        window.console.log(err);
      });
  }



     


相关文章
|
17小时前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
1天前
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
5 0
|
3天前
|
存储 安全 前端开发
PHP医院安全不良事件管理系统源码(AEMS)前端vue2+element+后端laravel8不良事件上报与闭环管理
医院不良事件上报与管理系统结合现代医院管理思路,遵照PDCA全面质量循环管理方法而设计,并在多家大型三甲医院成熟运用。系统从事件上报、基于人、机、料、法 、环的RCA分析、事件整改、效果评估实现了结构化、标准化、智能化的管理和分析,满足医院可追溯化、全流程闭环管理要求,满足等级医院评审细则要求,大力提高医院不良事件上报的效率,保障事件分析的准确性,促进医疗安全的提高,避免同类事件再次发生,改善整个医院医疗安全,从而实现医院安全医疗的目标。
20 3
|
8天前
|
移动开发 前端开发 JavaScript
前端和后端限制文件大小的具体实现方式
【5月更文挑战第3天】前端限制文件大小可使用HTML5的"accept"和"maxSize"属性或JavaScript的File API,后端则可通过判断文件字节大小、使用第三方库如Apache Commons FileUpload,或者在服务器框架如Flask、Spring中设置限制。Nginx也可作为反向代理设定上传限制,但可能影响用户体验。
19 3
|
9天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
21 0
|
11天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
12天前
|
JSON 前端开发 JavaScript
详细剖析让前端头疼的跨域问题是怎么产生的,又该如何解决
详细剖析让前端头疼的跨域问题是怎么产生的,又该如何解决
|
12天前
|
JavaScript 前端开发 数据安全/隐私保护
【好用】推荐10套后端管理系统前端模板
选择合适的模板可以大大提高开发效率,减少重复劳动,让开发者能够专注于业务逻辑的实现和功能的优化。开发者应根据项目的具体需求、团队的技术栈熟悉度以及产品的长远规划来选择最合适的模板,问题来了,这10款模板你更喜欢用哪个呢,欢迎交流。
|
12天前
|
存储 前端开发 JavaScript
从前端到后端:构建全栈应用的关键技术探究
在当今互联网时代,全栈开发已经成为了越来越多开发者的追求目标。本文将深入探讨从前端到后端构建全栈应用所需的关键技术,涵盖了前端框架选择、后端语言与框架、数据库设计以及前后端通信等方面,帮助读者全面了解全栈开发的必备技能和工具。
|
12天前
|
JSON 前端开发 Java
管理系统总结(前端:Vue-cli, 后端Jdbc连接mysql数据库,项目部署tomcat里)
管理系统总结(前端:Vue-cli, 后端Jdbc连接mysql数据库,项目部署tomcat里)