nodejs部分讲解

最新推荐文章于 2024-04-14 18:47:22 发布
最新推荐文章于 2024-04-14 18:47:22 发布
阅读量521 收藏
点赞数
文章标签： express mysql javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdx1641670284/article/details/128124549
版权

1.async+express+mysql ：

// 引入express
const express = require('express');
// 引入cors
const cors = require('cors');
// 引入select_mysql.js
let proMysql = require('./common/async_mysql');
const e = require('express');
/* 
    虽然通过require();引入了自定义的js文件，
    但是js文件里面的代码，并没有被require找到;
    需要被引入的文件将方法/变量名通过
    module.exports 暴漏在外，才能够找到;
*/
// 创建express实例
const app = express();
// 处理跨域
app.use(cors());
// 写一个get请求的register
app.get('/register',async ({query},res,next)=>{
    // 定义一个sql的查询语句
    let sql = `select * from userinfo where userName="${query.userName}"`;
    let data = await proMysql(sql);
    if(data.code == 1){
        if(data.data.length == 0){
            let inertSql = `insert into userinfo (userName,userPassword) values ("${query.userName}","${query.userPassword})`
            let insertData =await proMysql(inertSql);
            if(insertData.code == 1){
                res.end(JSON.stringify(insertData.data))
            }else{
                res.end(insertData.data)
            }
        }else{
            res.end('用户已注册');
        }
    }else{
        res.end(result.data)
    }
})

// 启动服务
app.listen(8080,'127.0.0.1',()=>{
    console.log('http://127.0.0.1:8080/');
})

2.post+express+body-parser ：

// 引入express
const express = require('express');
// 引入cors
const cors = require('cors');
// 引入body-parser
/* 
    解析post的请求体里面的参数;
*/
const bodyParser = require('body-parser');
// 创建app实例
const app = express();
// 引入cors解决跨域中间件
app.use(cors());
// 解析application/json参数
app.use(bodyParser.json());
// 解析 text/plain
app.use(bodyParser.text());
app.use(express.static('common'))
// post入口
app.post('/register',(req,res)=>{
    console.log(req.body);
    res.end(JSON.stringify({}))
})

// 启动服务
app.listen(8080,'127.0.0.1',()=> {
    console.log('地址是: http://127.0.0.1:8080/');
})

3.静态托管： 

// 引入express 
const express = require('express');
// 创建app实例
const app = express();
// 使用express的static 把文件托管到服务器上
// 也就是可以通过地址/路径的方式访问到
/* 
    托管文件
    app.use(入口,express.static(相对路径))
    相对路径有一点问题;
    如果用vscode的run  code插件运行那么，
    托管的路径从项目的根目录开始写
    如果用命令行cmd运行，就可以使用
    正常的相对路径
    如果代码放在服务器上，路径填写正常的相对路径
    入口的路径，替代express.static的路径
*/
// app.use('/common',express.static('/nodeJs/2.node+express+mysql/common'))
app.use('/public',express.static('./common'))

// 启动服务器
app.listen(8080,'127.0.0.1',()=>{
    console.log('http://127.0.0.1:8080/');
})

 4.文件上传前需要配置的模块：

4.1npm初始化：

4.2安装express模块 ：

 

4.3安装cors模块： 

 

4.4安装mysql： 

 

4.5安装body-parser模块： 

 

HTML+前端部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./download/font_3801592_bo0a4xwi2bc/iconfont.css">
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
        width: calc(100vw - 34px);
        padding: 0 17px;
        height: 100vh;
        overflow: hidden;
        background-image: url(./back.webp);
        background-size: 100% 100%;
      }
      .title{
            width: 100%;
            height: 44px;
            line-height: 44px;
            display: flex;
            justify-content: space-between;
            color: #fff;
        }
        .left_icon .iconfont{
            font-size: 30px;
        }
        .center_title{
            font-size: 20px;
        }
        .right_icon .iconfont{
            font-size: 35px;
        }
        .head{
            padding: 35px 0;
            display: flex;
            justify-content: center;
        }
        .headImg{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #fff;
            background-color: rgba(0, 0, 0, 0.1);
        }
        .upload{
            width: 60px;
            height: 60px;
            padding: 20px;
            text-align: center;
            color: #fff;
        }
        .icon{
            height: 35px;
            line-height: 35px;
        }
        .icon-jiahao{
            font-size: 40px;
        }
        .head_title{
            height: 25px;
            line-height: 25px;
            font-size: 18px;
        }
        .upload_img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            display: none;
        }
        .upload_img img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .form{
            width: 70%;
            padding: 20px 15%;
        }
        .input{
            height: 50px;
        }
        .input input {
            width: 100%;
            height: 35px;
            line-height: 35px;
            font-size: 19px;
            outline: 0;
            border: 0;
            background-color: rgba(0, 0, 0, 0);
            border-bottom: 2px solid #eee;
        }
        .input input:focus{
            border-bottom: 2px solid pink;
        }
        /* 改变input的placeholder的颜色 */
        .input input::-webkit-input-placeholder {
            color: #fff;
        }
        .btn{
            width: 70%;
            padding: 20px 15%;
            text-align: center;
        }
        .button button{
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-radius: 22px;
            font-size: 20px;
            color: rgb(61, 6, 61);
            font-weight: bold;
            outline: 0;
            border: 0;
            box-shadow: 5px 0 5px #eee;
            background-color: #fff;
        }
        .button button:active{
            background-color: #eee;
        }
        .desc{
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            color: #fff;
        }
        .desc span{
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="title">
            <div class="left_icon">
                <span class="iconfont icon-fanhui"></span>
            </div>
            <div class="center_title">
                注册
            </div>
            <div class="right_icon">
                <span class="iconfont icon-gantanhaozhong"></span>
            </div>
        </div>
        <div class="head">
            <div class="headImg">
                <div class="upload">
                    <div class="icon">
                        <span class="iconfont icon-jiahao"></span>
                    </div>
                    <div class="head_title">
                        头像
                    </div>
                </div>
                <div class="upload_img">
                    <img>
                </div>
            </div>
        </div>

        <div class="form">
            <div class="input">
                <input type="text" class="userName" placeholder="用户名">
            </div>
            <div class="input">
                <input type="password" class="password"  placeholder="设置密码">
            </div>
            <div class="input">
                <input type="password" class="repassword"  placeholder="确认密码">
            </div>
        </div>

        <div class="btn">
            <div class="button">
                <button>注册</button>
            </div>
            <div class="desc">
                已经有帐号了？<span>登录</span>
            </div>
        </div>
    </div>

    <script>
       //给headImg添加点击事件
       document.addEventListener('click', function (e){
        })
        // 给headImg添加点击事件
        document.querySelector('.headImg').onclick = function (e){
            // 动态创建input
            let input = document.createElement('input');
            // 改变type
            input.type = 'file';
            // js触发点击
            input.click();
            // 监听input改变
            input.onchange = function (){
                // 获取input选择的file文件信息
                let select_file = input.files[0];
                // 创建ajax
                let ajax = new XMLHttpRequest();
                // 打开连接
                ajax.open('post','http://192.168.2.119:8080/upload',false);
                // 创建FormData
                let data = new FormData();
                // 将选择的文件写入formdata
                /* 
                    FormData是一个虚拟的表单;
                    表单提交会刷新整个页面;
                    在项目的部署的时候不会出现这个问题
                */
                data.append('file',select_file);
                // 发送
                ajax.send(data);
                // 监听
                ajax.onreadystatechange = function ({currentTarget}){
                    // 最后一次握手
                    if(currentTarget.readyState == 4 && currentTarget.status == 200){
                        // 先赋值图片路径
                        document.querySelector('.upload_img img').src = currentTarget.response;
                        // 让上传图片的消失
                        document.querySelector('.upload').style.display = 'none';
                        // 让图片的显示
                        document.querySelector('.upload_img').style.display = 'block';
                    }
                }
            }
        }
    </script>
</body>

</html>

 ndoejs后端配置：

api.js文件：

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const bodyParser = require('body-parser');
const proMysql = require('./async_mysql')

let app = express();
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.text());
app.use(bodyParser.urlencoded({extended:false}));
app.use('/public',express.static('/作业/11.29作业/public'))

let storage = multer.diskStorage({
    destination: path.join(__dirname,'./public'),
    filename: function (req,file,cb){
        // 获取到上传文件的类型
        let type = file.originalname.split('.')[1];
        // 获取到文件的名字
        let fliedName = file.originalname.split('.')[0];
        // cb文件保存信息
        // null 都是空  第二个参数 保存文件的名字
        cb(null,`${fliedName}-${Date.now()}.${type}`)
    }
})

let upload = multer({storage});

app.post('/upload',upload.single('file'),(req,res)=>{
    res.end(`http://127.0.0.1:8080/public/${req.file.filename}`)
})

app.post('/register',async ({body},res,next)=>{
    // 转换成json格式
    body = JSON.parse(body);
    // 定义一个sql的查询语句
    let sql = `select * from user where userName="${body.userName}"`;
    let data = await proMysql(sql);
    if(data.code == 1){
        if(data.data.length == 0){
            let inertSql = `insert into user (userName,userPassword,nickName,sex,headImg,createTime) values ("${body.userName}","${body.userPassword}","易潇潇","男","${body.headImg}","${Date.now()}")`
            let insertData =await proMysql(inertSql);
            if(insertData.code == 1){
                res.end(JSON.stringify(insertData.data))
            }else{
                res.end(insertData.data)
            }
        }else{
            res.end('用户已注册');
        }
    }else{
        res.end(result.data)
    }
})

app.listen(8080,'192.168.2.119',()=>{
    console.log('http://192.168.2.119:8080/');
})

async_mysql.js：

// 封装一个sql语句的处理函数
async function proMysql(sql){
    // 创建一个promise
    let pro =await new Promise((resolve,reject)=>{
        // 引入mysql模块
        let mysql = require('mysql');
        // 创建数据库连接
        let con = mysql.createConnection({
            // 地址
            host:'localhost',
            // 数据库名称
            database: 'web2208',
            // 数据库用户名
            user:'wdx',
            // 数据库密码
            password: 'a1641670284'
        });
        // 打开数据库连接
        con.connect();
        // 执行sql语句
        con.query(sql,(error,result)=>{
            if(error){
                resolve({
                    // 返回一个对象的原因，是直接在then函数判断执行是否正确 0错误
                    code: 0,
                    data: error
                })
            }else{
                resolve({
                    code: 1,
                    data: result
                })
            }
            con.end();
        })
    })
    // 返回
    return pro
}
// select_mysql.js的方法需要暴漏在在外，通过module.exports = 要暴漏的方法/变量
// 才能够被require引用到;
module.exports = proMysql;

 

 

文丁响
关注
在 NodeJS 服务端项目中使用注解
palerock的博客
09-09 3307
在 NodeJS 服务端项目中使用注解 NodeJS 是使用 Javascript 语言的服务端开发的解决方案。 当从 Java 通过 Spring 开发转到使用 NodeJS 开发时，总觉得代码不够优雅，虽然 NodeJS 提供了诸如 Express、koa 等非常方便的 web 服务端框架，但是由于 Javascript 没有类似与注解的语法，在开发的过程中虽然比使用 Java 开发轻便多了，但也会情不自禁得去想，要是 Javascript 也能使用注解就好了。 抱着这个目的，我在网上发现了一个 Jav
nodeJs练习项目 结构简洁 注释全面
05-20
nodeJs综合练习项目，实现基础的静态页面引擎，请求引擎
Node.js基础代码示例，带注释
rui15111的博客
12-21 6052
'use strict'; var http = require('http'); //端口号 var port = process.env.PORT || 1337; /** * 回调函数的使用 */ //回调函数 var fs = require("fs");//回调函数 fs.readFile('./input.txt', function (err, data) { if (er
node的详细注解
Serena_tz的博客
04-29 775
命令行窗口 开始菜单–>运行–>CMD–>回车 其他命名： 常用的指令： 目录： 当前目录可以省略哦~ 环境变量： windows系统变量： 计算机-右键-属性。 一般改用户变量。 改了环境变量，我们需要重启命令行窗口。 进程和线程 nodejs简介 用途： 模块化简介 js没有模块化。 弥补js没有模块化的缺陷。 默认模块的代码都是单独保存在一个函数里面。一个模块的东西需要给别的模块使用，则要暴露出去。 引入其他模块。必须.开头，或者..开头。 使用reg
Node.js留言板（超详细注释）
最新发布
weixin_52841164的博客
04-14 653
【代码】Node.js留言板（超详细注释）
Node.js语法
本地服务器
01-02 570
Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架。因此语法跟JavaScript一样 1语法 已；号结尾 {}为语句块 //和/**/为注释 大小写区分 2数据类型 5种数据类型：string、number、boolean、object、function 3种对象类型：Oject、Data、Array 2种特殊类型：null、undefined 类型...
nodeJS基础讲解和DEMO
09-03
`nodejs培训02.html`可能会深入到Node.js的模块系统，讲解如何使用`require`引入模块，以及`exports`和`module.exports`的区别，这些都是在Node.js中组织和复用代码的关键。此外，Node.js的内置模块如`fs`（文件系统...
Nodejs进阶：核心模块net入门学习与实例讲解
10-21
首先，net模块包括两个主要部分： 1. net.Server：这是一个用于创建TCP服务器的类。服务器内部通过socket来与客户端进行通信。当有客户端连接时，它会触发'connection'事件，并传递一个表示该连接的net.Socket对象...
nodejs实战pdf+源码_nodejs_nodejs实战pdf+源码_
10-03
1. **基础入门**：讲解JavaScript在Node.js环境下的工作方式，以及如何安装和设置开发环境。书中会介绍Node.js的核心模块，如`fs`（文件系统）模块用于读写文件，`http`模块用于创建HTTP服务器。 2. **模块系统**：...
nodejs视频教材-很通俗易懂的讲解
09-19
根据提供的文件信息，我们可以从标题、描述以及部分给出的内容中提炼出有关Node.js的重要知识点。 ### Node.js基础知识 #### 1. 什么是Node.js？ Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它允许...
nodejs实现自定义dns域名解析服务器
11-21
nodejs实现自定义dns域名解析服务器，可以通过配置test.js修改域名解析到指定的ip地址。 启动命令：npm start
Node 注释
weixin_30641465的博客
10-17 644
ctrl+alt+i 头部注释（作者、日期、改善着、修改日期）文件->首选项->设置->搜索关键词fileheader 方法注释 /**->回车/***[main函数名] 求和（方法描述）**@param{Number参数类型}[a形参名称] 参数描述*@param{Number}[b]*@return {undefined} 两个参数的和 ...
node.js:＜8＞关于node的接口的理解
aiwanchengxu的博客
04-10 977
接口这个东西在我们学习之中经常听见，那么node里面有哪些接口呢？ 有get、post、delete、jsonp等，在我们写这些自定义接口的时候 //2.1 创建自己的路由 const express=require('express') const router = express.Router() //3.1 编写get接口 router.get('/get',(req,res)=>{ //3.2 获取客户端请求的字符串 const data = req.query
自定义注解
wqbs369的专栏
11-21 207
深入理解Java：注解（Annotation）自定义注解入门 　　要深入学习注解，我们就必须能定义自己的注解，并使用注解，在定义自己的注解之前，我们就必须要了解Java为我们提供的元注解和相关定义注解的语法。 元注解： 　　元注解的作用就是负责注解其他注解。Java5.0定义了4个标准的meta-annotation类型，它们被用来提供对其它 annotation类型作说
(译+注解)node.js的C++扩展入门
anwei3074的博客
09-06 181
声明：本文主要翻译自node.js addons官方文档。部分解释为作者自己添加。 编程环境： 1. 操作系统 Mac OS X 10.9.51. node.js v4.4.22. npm v3.9.2 本文将介绍node.js中编写C++扩展的入门知识。 1. 基本知识介绍 在node.js中，除了用js写代码以外，还可以使用C++编写扩展，这有点类似DLL，动态链接进js代...
介绍Node.js中fs模块 代码和注释。
小墨蛇的博客
10-17 958
Node.js中的fs模块提供了一些用于文件系统操作的API，包括文件读写、目录操作等。
自定义一个简单的注解
weixin_42132143的博客
04-07 395
注解用了这么多，第一次探索下它的自定义 注解有4种元注解： @Target：表示该注解可以用于什么地方，属性ElementType参数有以下 CONSTRUCTOR：构造器的声明 FIELD：域声明（包括enum实例） LOCAL_VARIABLE：局部变量声明 METHOD：方法声明 PACKAGE：包声明 PARAMETER：参...
npm使用注解
Muzzik的博客
07-11 306
安装项目所有依赖包：npm i 查看项目依赖：npm ls 安装指定包：npm i 包名 备注： package.json中的dependencies和devDependencies devDependencies是开发时的依赖，上线打包时并不会出现打包进代码中，比如gulp相关的工具，只是用于开发阶段 dependencies是线上运行时需要的依赖，打包时会被打包处理，比如angular、vue、vue-router等等，没有这些依赖，你的程序又怎么能跑起来呢。项目中做依赖处理的时候要注意，项目中依.
使用node自定义开头注释，遍历文件和修改文件
weixin_45343326的博客
10-23 437
const parameters = { Copyright: '/*@版权所有*/', isRoute: '//', //第一行判断条件 hasMe: '/*@' //自身判断条件 } function mapDir(dir, callback, finish) { fs.readdir(dir, function (err, files) { if (err) { console.error(err) .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值