visual studio code搭建本地服务器(node.js+express)

一、安装node.js(常规软件安装流程,比较简单,不用赘述)

二、安装express框架

1. 打开Windows命令提示符,输入:

npm install express -g,等待,安装好如下所示:

npm install express-generator -g,等待,安装好如下所示:

2. npm是node自带的一个工具,在命令行中使用可以快速安装node.js里面的模块,此时我们安装了一个名叫"express"的框架,用于运行本地服务器。

三、初始化项目

1. 打开vs code的终端,输入:

express myserver

cd myserver

npm install

作用分别是:用express框架创建一个项目名叫myserver、进入myserver目录、初始化myserver项目所需的文件(下载所需的js文件)。

2. 项目的express框架组成

 项目创建成功之后,生成五个文件夹、主文件app.js配置信息文件packetage.json

 bin是项目的启动文件,配置以什么方式启动项目,默认 npm start,其中的www文件用于启动服务

 node_modules是文件所需的模块在node.js中模块与文件是一一对应的,也就是说一个node.js文件就是一个模块,文件内容可能是我们封装好的一些JavaScript方法、JSON数据、编译过的C/C++拓展等,在关于node.js的误会提到过node.js的架构。其中http、fs、net等都是node.js提供的核心模块,使用C/C++实现,外部用JavaScript封装。怎么使外部访问这个module,我们知道客户端的JavaScript使用script标签引入JavaScript文件就可以访问其内容了,但这样带了的弊端很多,最大的就是作用域相同,产生冲突问题,以至于前端大师们想出了立即执行函数等方式,利用闭包解决。node.js使用exports和require对象来解决对外提供接口和引用模块的问题。

 public是项目的静态文件,放置js、css、img等文件(html文件夹是我自己添加进去的,存放网页的,后期可能应该存放在views文件夹中)

 routes是项目的路由信息文件,控制地址路由

 views是视图文件,放置模板文件ejs或jade等(其实就相当于html形式的文件)

以上就是基于 express的MVC框架模式,是一个Web项目的基本构成

 

 

 

四、运行

1. 在终端进入bin目录,输入node www启动服务

2.在浏览器中输入http://localhost:3000/,这就是本地服务器的地址,访问成功出现以下页面

2. 访问项目中的网页,如登录网页login.html

此时,一个基于express框架的web项目便搭建好了~

参考链接:

https://jingyan.baidu.com/article/9c69d48ff3eb3d13c8024e7d.html

http://www.cnblogs.com/imwtr/p/4350282.html

转载于:https://www.cnblogs.com/qinsafefy/p/9389665.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251085.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chrome调试

技术拓展直播课8 按chrome的官方文档 长按刷新 清除缓存(不一定好使) Ctrl f 查找类 console控制台见b站 bilibili source面板直接打断点 效果和debugger一样 单步调试 进入到函数的下一步 网速 no throttling 是否需要过滤 domcontentloaded d…

61-1 认识webpack

认识webpack 面向过程开发的不便引入外部js执行顺序面向对象开发 加载多个文件耗时更多 增加了http请求 引入过多js变量来源不明 优化 使用前先import 但使用import语法需要借助工具webpack翻译为浏览器可以解析的语法安装node自动携带npmwebpack若没有全局安装 需要使用npx…

css font简写

一、字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,fontfont-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style&…

javascript --- 原生的拖拽功能实现

准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class"drag" style"width:100px;height:100px;top:0;left:0"></div>监听鼠标的按住事件: let dragDiv document.getElementsByClassName…

web安全学习-验证机制存在的问题

验证机制是应用程序防御恶意攻击的中心机制。它处于防御未授权的最前沿&#xff0c;如果用户能够突破那些防御&#xff0c;他们通常能够控制应用程序的全部功能&#xff0c;自由访问其中的数据。缺乏安全稳定的验证机制&#xff0c;其他核心安全机制&#xff08;如回话管理和访…

ES5-拓展 原型链、继承、类

Symbol不是构造函数 Object不是原型是实例对象 他的构造器继承原型上的构造器 undefined是未定义 null是空指针 一、原型链 1. 函数也是实例对象 2. 构造函数Object是由Function构造出来的 3. 有一种说法是&#xff0c;原型链的终点是null Object.prototype.__proto__指向nul…

spring boot 加载application配置文件

这就要注意了 转载于:https://www.cnblogs.com/huochaihe/p/9397849.html

javascript --- 防抖与节流

先做一个监听鼠标移动的base: <style>#content{height:150px;width:200px;text-align:center;color:#fff;background-color:#ccc;font-size: 70px;} </style> <div id"content"></div> <script>let content document.getElementById…

DOM-9 【实战】模块化开发Todolist(面向过程)

模块化分类 按dom结构划分按功能划分&#xff08;组件化开发&#xff09; 模块与模块之间可以相互依赖&#xff0c;但互不影响 模块&#xff1a;IIFE赋值给一个变量&#xff0c;当引入模块时&#xff0c;IIFE会立即执行 单标签闭合才符合W3C规范display、position放在上面css是…

DOM-10 面向对象开发Todolist

将插件配置项写在html的div里&#xff0c;data-config自定义属性&#xff0c;外单引号&#xff0c;内双引号&#xff08;内部是JSON字符串&#xff09; <div class"todo-wrap" data-config{"plusBtn":"j-show-input","inputArea":…

Ansible基础概述

一、Ansible简介 Ansible基于Python语言实现&#xff0c;由paramiko和PyYAML两个关键模块构建。Ansible的编排引擎可以出色地完成配置管理&#xff0c;流程控制&#xff0c;资源部署等多方面工作。Ansible公司负责Ansible开源软件的维护&#xff0c;管理。一般软件的更新大概每…

DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件

鼠标事件深入 点击事件 mousedown mouseupposition: absolute 会将内联元素变为块级&#xff08;比如a&#xff09;a标签的协议限定符&#xff08;伪协议&#xff0c;防止跳转和刷新&#xff0c;让href不生效&#xff09;&#xff0c;javascript:;&#xff0c;可以让点击和拖…

scrapy的操作

转载于:https://www.cnblogs.com/mengqingjian/p/8337772.html

Devexpress xaf针对某个用户登录后在面板中设置导航无效的解决方法

Devexpress xaf框架生成的项目默认情况下导航栏是显示在左侧&#xff0c;有时候我们用某个账户登录后&#xff0c;发现导航栏无法显示在左侧&#xff0c;操作十分不方便。我们可以去数据库删除当前登录用户的自定义布局 解决方法如下: 1、查询PermissionPolicyUser用户表&#…

DOM-13 【实战】输入及状态改变事件、京东搜索框

模块化 IIFE window.onload function () {init() }function init() {keySearch()others() // 多人开发的模块 }var keySearch (function () {var searchKw document.getElementById(J_search_kw),autoKw document.getElementById(J_autoKw),recomKw JSON.parse(document…

吴恩达“机器学习”——学习笔记二

定义一些名词 欠拟合&#xff08;underfitting&#xff09;&#xff1a;数据中的某些成分未被捕获到&#xff0c;比如拟合结果是二次函数&#xff0c;结果才只拟合出了一次函数。 过拟合&#xff08;overfitting&#xff09;&#xff1a;使用过量的特征集合&#xff0c;使模型过…

Http 概述

Http是可靠的数据传输协议。资源Web服务器是Web资源&#xff08;resource&#xff09;的宿主。包括静态文件以及动态的内容。 媒体类型Http对每种需要由web传输的对象都打上了名为MIME类型的数据格式标签。主要的mime类型: text/htmltext/plainimage/jpegimage/gifvideo/quickt…

DOM-14 【实战】解决事件代理和鼠标移动事件的窘态

鼠标的滑入滑出 案例 事件现象应用场景mouseover/mouseout绑定在父元素时&#xff0c;对她的所有子元素&#xff0c;事件都生效dom结构简单mouseenter/mouseleave只对她绑定的元素有效&#xff0c;对window绑定无效dom结构简单mousemove长触发dom结构复杂// 绑定在父元素上 /…

javascript --- 再读作用域和闭包

执行环境: // 定义了变量或函数有权访问的其他数据,决定了它们各自的行为 // 每个执行环境都有一个与之关联的变量对象 // 执行环境中定义的所有变量和函数都保存在这个变量中执行环境与函数: // 每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入一个…

DOM-15/16【实战】鼠标行为预测技术

鼠标预测行为动作复杂&#xff0c;使用事件代理得不偿失&#xff0c;在数量有限的情况下&#xff0c;使用循环绑定更好用户从menu斜着向右下角滑入时&#xff0c;可能是进入main&#xff0c;也可能是要选择子菜单&#xff0c;在判断前先做延迟如何判断用户进入main的意图&#…