当前位置: 首页>编程语言>正文

html5中服务器的绝对路径怎么设置 html5服务器搭建

一.搭建环境

  1.Visual Studio Code代码编辑器  (其他编辑器也可以)

  2.node.js是运行javascript代码的环境  (下载安装教程上网去搜)

  3.如果想涉及数据库的话,就下载个mysql  (下载安装教程上网去搜)

二.搭建服务器前的准备

   1.在桌面上建一个文件夹 ddd  (随便起的)

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_node.js,第1张

 2.  Win+r打开终端  

      输入cd

      将卓面上的ddd文件拖入到终端里,回车。则表示到该文件下了

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_02,第2张

 

3.初始化此文件 输入 npm init    回车,回车,再回车.........直到结束到了C:\Users\29075\Desktop\ddd>就可以了

 

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_html5中服务器的绝对路径怎么设置_03,第3张

 4.去ddd文件看看是否出现了package.json文件,此文件在哪个文件夹则该文件夹就是项目,所以ddd就是一个项目文件夹。这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中。

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_javascript_04,第4张

5.咱们去安装cnpm指令,为什么要安装呢,当然是因为下载速度快呀,速度块用起来才舒服。

  电脑上只有npm指令,检查自己的电脑上是否有cnpm指令 Win + r打开终端输入 npm -v 回车

如果显示版本号,则有npm指令。输入cnpm -v回车。如果显示版本号则有cnpm指令

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_node.js_05,第5张

 cd ../../返回上两级(不想这样的,关掉终端重新打开一个,再输入这两行命令检查是否有)

 此时我已经有这两个命令了.

没有的在终端里输入

  • npm install -g cnpm --registry=https://registry.npm.taobao.
  • 这是国内的镜像市场

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_node.js_06,第6张

 我已经有了,安装错误,提示我已经有了。

安装完之后再去测有没有这个指令

三.正式开始服务器的搭建

  1.在终端里进入该项目文件夹下

 2.安装koa模块输入cnpm install koa --save

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_07,第7张

3.项目文件夹下出现另一个文件

 

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_javascript_08,第8张

 

 4.将ddd文件夹拖入 Visual Studio Code

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_09,第9张

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_javascript_10,第10张

5.在ddd文件夹下创建index.js

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_11,第11张

 

5.去文件夹node_modules 中找到 koa文件夹下的Readme.md文件打开

 

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_javascript_12,第12张

 6.

// 导入koa模块
const Koa = require('koa');
const app = new Koa();
// 定义变量port
var port = 5050
// response 服务器响应
app.use(ctx => {
  ctx.body = 'Hello Koa';
});

// 监听端口号
console.log("服务器正在运行中")
app.listen(port);

7.运行,在该文件夹下输入 inode index.js (此时必须安装好node.js)为了运行该文件夹下的index.js里的代码.服务器已经运行了

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_node.js_13,第13张

 8.此时一个啥功能都没有的服务器已经搭建好了。是不是特别容易小伙伴们。

给这个服务器增加功能:1.增加路由接口

                                        2.增加静态资源访问能力

                                        3.让服务器的路由增加参数解析能力

                                        4.让服务器能够连接上数据库

                                        5.解决服务器的跨域问题

                                        6.能够向服务器上传文件

四.增加功能

   1.增加路由接口   在终端进入ddd文件夹下输入cnpm install koa-router --save  回车

   

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_14,第14张

如果用的是vscode编辑器记得安装后刷新一下否则找不到koa-router文件夹

找到koa-router文件夹下的lib文件夹打开lib文件夹下的router.js文件复制右侧红框中的代码。

重复的可以删掉。

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_javascript_15,第15张

 修改好的代码

// 导入koa模块
const Koa = require('koa');
const app = new Koa();
// 定义变量port
var port = 5050
// response 服务器响应
// app.use(ctx => {
//     ctx.body = 'Hello Koa';
// });


// 导入koa-router模块
const Router = require('koa-router');

const router = new Router();


// 路由接口
router.get('/', (ctx, next) => {
    // ctx.router available
    ctx.body = "路由接口增加成功"
});

// 增加小米接口

router.get('/xiaomi', (ctx, next) => {
    // ctx.router available
    ctx.body = "小米路由接口增加成功"
});



app
    .use(router.routes())
    .use(router.allowedMethods());

// 监听端口号
console.log("服务器正在运行中")
app.listen(port);

 每次修改完index.js文件重新打开服务器在终端ddd文件夹下输入node index.js

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_javascript_16,第16张

在浏览器输入http:localhost:5050/   回车显示默认的接口我定义的端口号为5050.

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_17,第17张

 在浏览器输入http:localhost:5050/xiaomi

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_服务器_18,第18张

 想增加什么路由接口就增加什么路由接口 ctrl + c 结束服务器运行

 2.增加静态资源访问能力

安装koa-static模块  在终端ddd文件夹下输入cnpm install koa-static --save

 

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_javascript_19,第19张

去文件夹node_modules 中找到 koa-static文件夹下的Readme.md文件打开复制右侧代码

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_html5中服务器的绝对路径怎么设置_20,第20张

 修改后的代码 就增加了两行代码,导入模块一行,使用一行(app.use(serve(__dirname + '/sx'));)

意思就是默认访问ddd文件夹下的sx文件(自己定义啥就写啥,记得在ddd文件夹下创建个文件叫sx)

// 导入koa模块
const Koa = require('koa');
const app = new Koa();
// 定义变量port
var port = 5050

// 导入koa-router模块
const Router = require('koa-router');
const router = new Router();

// 导入koa-static模块
const serve = require('koa-static');
// or use absolute paths
app.use(serve(__dirname + '/sx'));




// 路由接口
router.get('/', (ctx, next) => {
    // ctx.router available
    ctx.body = "路由接口增加成功"
});

// 增加小米接口

router.get('/xiaomi', (ctx, next) => {
    // ctx.router available
    ctx.body = "小米路由接口增加成功"
});



app
    .use(router.routes())
    .use(router.allowedMethods());

// 监听端口号
console.log("服务器正在运行中")
app.listen(port);

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_html5中服务器的绝对路径怎么设置_21,第21张

 在sx文件夹下写个1.txt(随便写的,内容也是)去浏览器访问

    打开服务器

    在浏览器输入http:localhost:5050/1.txt

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_服务器_22,第22张

  3.让服务器的路由增加参数解析能力

     安装koa-bodyparser模块

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_23,第23张

 

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_html5中服务器的绝对路径怎么设置_24,第24张

 修改后的代码

// 导入koa模块
const Koa = require('koa');
const app = new Koa();
// 定义变量port
var port = 5050

// 导入koa-router模块
const Router = require('koa-router');
const router = new Router();

// 导入koa-static模块
const serve = require('koa-static');
// or use absolute paths
app.use(serve(__dirname + '/sx'));


// 导入路由参数解析模块
var bodyParser = require('koa-bodyparser');
app.use(bodyParser());



// 路由接口
router.get('/', (ctx, next) => {
    // ctx.router available
    ctx.body = "路由接口增加成功"
});

// 增加小米接口

router.get('/xiaomi', (ctx, next) => {
    // ctx.router available
    console.log(ctx.request.query)
    ctx.body = "小米路由接口增加成功"
});



app
    .use(router.routes())
    .use(router.allowedMethods());

// 监听端口号
console.log("服务器正在运行中")
app.listen(port);

在xiaomi接口中,打印服务器得到的数据,访问该接口.(记得重新打开服务器) 传入点数据

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_javascript_25,第25张

 

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_node.js_26,第26张

 输入的数据以{ }对象的方式打印出来了

 

4.让服务器能够连接上数据库

      4.1mysql下载安装教程(上网搜,尽量别下载新版本的.我的是mysql-installer-community-5.7.33.0 版本的)

      4.2安装数据库连接模块cnpm install mysql

 

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_27,第27张

 同上

html5中服务器的绝对路径怎么设置 html5服务器搭建,html5中服务器的绝对路径怎么设置 html5服务器搭建_mysql_28,第28张

修改后的代码

// 导入koa模块
const Koa = require('koa');
const app = new Koa();
// 定义变量port
var port = 5050

// 导入koa-router模块
const Router = require('koa-router');
const router = new Router();

// 导入koa-static模块
const serve = require('koa-static');
// or use absolute paths
app.use(serve(__dirname + '/sx'));


// 导入路由参数解析模块
var bodyParser = require('koa-bodyparser');
app.use(bodyParser());

// 导入数据库连接模块
var mysql = require('mysql');
var connection = mysql.createConnection({
    host: 'localhost',
    //   mysql账号
    user: 'root',
    //   mysql密码
    password: '123456',
    //   数据库的名字
    database: 'my_db'
});
// 打开数据库连接
connection.connect();

// 对数据库的操作  可进行增删改查
connection.query('SELECT 1 + 1 AS solution', function (error, results, fields) {
    if (error) throw error;
    console.log('The solution is: ', results[0].solution);
});
// 关闭数据库连接
connection.end();

// 路由接口
router.get('/', (ctx, next) => {
    // ctx.router available
    ctx.body = "路由接口增加成功"
});

// 增加小米接口

router.get('/xiaomi', (ctx, next) => {
    // ctx.router available
    console.log(ctx.request.query)
    ctx.body = "小米路由接口增加成功"
});



app
    .use(router.routes())
    .use(router.allowedMethods());

// 监听端口号
console.log("服务器正在运行中")
app.listen(port);

5.解决服务器的跨域问题

6.能够向服务器上传文件

 


https://www.xamrdz.com/lan/5v51921767.html

相关文章: