Node.js项目（一）

最新推荐文章于 2024-04-23 23:50:12 发布
最新推荐文章于 2024-04-23 23:50:12 发布
阅读量952 收藏 2
点赞数 1
文章标签： node.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50315078/article/details/127827168
版权

0.前言

  • 架构：前端（Frontend）、后端(Backend)
  • 前端工程化环境：webpack
  • CSS预处理工具：sass
  • JS库(Ajax)：jQuery
  • SPA(single page application），路由：SME-Router
  • JS模块化：ES Module,CommonJS Module
  • UI组件库：Bootstrap(AdminLTE)
  • RMVC:art-template

  • Node.js

  • Express

  • MongoDB(Mongoose)

1.webpack工程化

  • webpack作用：对文件进行打包

  • webpack官网：https://webpack.js.org/

  • 初始化：yarn init -y

  • 添加包：yarn add webpack -D , yarn add webpack-cli -D(本项目使用的webpack版本为4.44.2，webpack5.0版本和4.x版本有很大区别，所以建议使用 yarn add webpack@4.44.2 -D yarn add webpack-cli@3.3.12)

  • 查看帮助：webpack --help

  • webpack 是使用文件进行配置的，所以创建一个配置文件：webpack.config.js

开始测试：

webpack.config.js

const path = require('path')

module.exports = {
    //配置入口
    entry: {
        app: './src/app.js'
    },

    //配置出口
    output: {
        //注意必须写物理路径
        path: path.join(__dirname, './dist'),
        filename: 'app.js'

    }
}

src/app.js

console.log(0)

运行：npx webpack

2.原生webpack

  • 添加webpack原生插件：yarn add html-webpack-plugin@4.4.0 -D

webpack.config.js添加插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //...

    //配置插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './public/index.html'),
            filename: 'index.html',
            inject: true
        })

    ]
}
  • 为了方便启动，我们书写一下脚本：
  "scripts": {
    "build":"npx webpack"
  }
  • 使用yarn启动，不用写run：yarn build

3.配置dev-server

  • 安装dev-server：yarn add webpack-dev-server@3.11.2 -D

webpack.config.js

module.exports = {

	//...
    
    //配置dev-server
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        //是否压缩
        // compress: true,
        port: 8080
    }

}

  • 运行：npx webpack-dev-server -y

  • 为了简化，我们继续写一个脚本： "dev": "npx webpack-dev-server"

4.文件的拷贝

  • 解决favicon.ico不存在的问题：https://www.lagou.com/images/favicon.ico
  • 保存文件至根目录
  • 安装插件:npm i copy-webpack-plugin@6.4.1 -S -D或者yarn add copy-webpack-plugin -S -D
  • webpack.config.js
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        //{ from: "source", to: "dest" },
        //{ from: "other", to: "public" },
           from: path.resolve(__dirname, './public/favicon.ico'),
                    to: 'dist'
      ],
    }),
  ],
};
  • 为了方便，我们统一一下版本：

package.json

{
  "devDependencies": {
    "@webpack-cli/serve": "^1.7.0",
    "copy-webpack-plugin": "6.4.1",
    "html-webpack-plugin": "4.4.1",
    "webpack": "4.41.5",
    "webpack-cli": "3.3.10",
    "webpack-plugin": "^1.0.5"
  },
  "scripts": {
    "build": "npx webpack",
    "dev": "npx webpack-dev-server"
  },
  "dependencies": {
    "webpack-dev-server": "3.10.1"
  },
}
  • 解决devtools的警告：
module.exports = {

	//...
    devtool: 'source-map',
}
  • 总结：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

    //配置环境
    mode: 'development',

    devtool: 'source-map',

    //配置入口
    entry: {
        app: './src/app.js'
    },

    //配置出口
    output: {
        //注意必须写物理路径
        path: path.join(__dirname, './dist'),
        filename: 'app.js'

    },
    //配置插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './public/index.html'),
            filename: 'index.html',
            inject: true
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, './public/favicon.ico'),
                    to: 'dist'
                },
            ],
        }),

    ],
    //配置dev-server
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        //是否压缩
        // compress: true,
        port: 8080
    }

}

5.art-template模板

  • 1.引用js，css：

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lagou-admin</title>
    <link rel="stylesheet" href="./libs/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="./libs/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="./libs/css/ionicons.min.css">
    <link rel="stylesheet" href="./libs/css/AdminLTE.min.css">
    <link rel="stylesheet" href="./libs/css/skin-blue.min.css">
    <link rel="stylesheet" href="./libs/css/blue.css">
</head>

<body class="hold-transition skin-blue sidebar-mini login-page">
    <div id="root"></div>
    <script src="./libs/js/jquery-2.2.3.min.js"></script>
    <script src="./libs/js/jquery.form.min.js"></script>
    <script src="./libs/js/socket.io.js"></script>
    <script src="./libs/js/bootstrap.min.js"></script>
    <script src="./libs/js/app.min.js"></script>
    <script src="./libs/js/icheck.min.js"></script>
</body>

</html>
  • 2.引入art-template

npm i art-template art-template-loader -S -D

(也可以使用yarn安装)

  • 3.添加新的配置项：

webpack.config.js

//这个插件是用来每次打包前先清除原来的内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
	//...

    //配置loaders
    module: {
        rules: [
            {
                test: /\.art$/,
                //排除部分
                exclude: /(node_modules)/,
                use: {
                    loader: 'art-template-loader'
                }

            }
        ]
    },
    
    //配置插件
    plugins: [
		//...
        new CleanWebpackPlugin()

    ],

}
  • index.art是你要准备的网页内容

src/app.js

//es6导入模块的方法
import indexTpl from './views/index.art'

const html = indexTpl({})

$('#root').html(html)

6.路由（sme-router）

import SMERouter from 'sme-router'
//es6导入模块的方法
import indexTpl from '../views/index.art'
import signinTpl from '../views/signin.art'

const router = new SMERouter('root')

const htmlIndex = indexTpl({})
const htmlSignin = signinTpl({})

// $('#root').html(signin)


router.route('/', (req, res, next) => {
    res.render(htmlSignin)

})

router.route('/signin', (req, res, next) => {
    res.render(htmlSignin)
})

export default router

src/app.js

//载入路由
import router from './routers'
router.go('/')

7.分离controller层

src/controller/index.js

//es6导入模块的方法
import router from '../routers'
import indexTpl from '../views/index.art'
import signinTpl from '../views/signin.art'

const htmlIndex = indexTpl({})
const htmlSignin = signinTpl({})
const _handleSubmit = (router) => {
    return (e) => {
        e.preventDefault()
        router.go('/index')

    }
}

const signin = (router) => {
    return (req, res, next) => {
        res.render(htmlSignin)
        $('#signin').on('submit', _handleSubmit(router))

    }
}

const index = (router) => {
    return (req, res, next) => {
        res.render(htmlIndex)

    }
}

export {
    signin,
    index
}

signin.art

<div class="login-box">
  <div class="login-logo">
    <a href="index2.html"><b>拉勾网</b>后台管理系统</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">请登录</p>

    <form id="signin" action="">
      <div class="form-group has-feedback">
        <input type="text" name="username" class="form-control" placeholder="用户名">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" name="password" class="form-control" placeholder="密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat" >登录</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

routers/index.js

import SMERouter from 'sme-router'
const router = new SMERouter('root')


import { signin, index } from '../controller'

// $('#root').html(signin)


router.route('/', signin(router))
router.route('/index', index(router))

router.route('/signin', signin(router))

export default router

8.css loader

  • 安装：yarn add css-loader@5.0.1 style-loader@2.0.0 -D

webpack.config.js


module.exports = {
	//...

    //配置loaders
    module: {
        rules: [
            {
                test: /\.css$/,
             loaders: ['style-loader', 'css-loader']

            }
        ]
    },

}
  • src/assets/common.css
html,
body {
    height: 100%;

}

#root {
    height: 100%;
}
  • controller/index.js
//...
const index = (router) => {
    return (req, res, next) => {
        res.render(htmlIndex)
        //window.resize(),让页面撑满整个屏幕
        $(window, '.wrapper').resize()

    }
}
  • 注意插件的版本号

9.express工程化（backend）

  • 从这里开始步入后端

  • 初始化yarn init -y

  • 添加依赖yarn global add express-generator

  • 初始化express -e

  • 下载依赖：yarn installor npm i

  • 为了方便修改package.json里面的脚本scripts:start:nodemon ./bin/www

  • 启动项目：yarn start

1.修改路由

修改app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

// var indexRouter = require('./routes/index');
// var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// app.use('/', indexRouter);
// app.use('/users', usersRouter);
const usersRouter = require('./routes/users')
app.use('/api/users', usersRouter)

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

我们这里不需要用到默认的routes/index.js，所以把它删除掉

修改routes/users.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.post('/signup', function (req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;
  • 后端的测试：使用postman或者insomnia测试
    • 测试地址：http://localhost:3000/api/users/signup
    • 请求方式：POST
    • 携带参数：
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AsFQogrJ-1668266731497)(D:\Typora\imgs\image-20220829215138044.png)]

2.controllers

controllers/users.js

const signup = (req, res, next) => {
    res.send('hello')
}

exports.signup = signup

routes/users.js

var express = require('express');
var router = express.Router();

const { signup } = require('../controllers/users')

/* GET users listing. */
router.post('/signup', signup);

module.exports = router;

3.ejs模板

view/succ.ejs

{
"ret": true,
"errorCode": 0,
"data":<%- data %>
    }

controllers/users.js

//注册用户

const signup = (req, res, next) => {

    const { username, password } = req.body

    //这里直接使用模板，第一个参数是模板模板名称succ.ejs
    res.render('succ', {
        data: JSON.stringify({ username, password })
    })
}

exports.signup = signup

4.mongoose

// getting-started.js
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/lagou-admin');

  • 创建数据库：use lagou-admin

  • kittens demo:

    • db.js
    // getting-started.js
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/lagou-admin', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));

//mongonDB里面的schema就相当于一个模型
var kittySchema = mongoose.Schema({
    name: String
});

var Kitten = mongoose.model('Kitten', kittySchema);

var felyne = new Kitten({ name: 'Felyne' });
felyne.save()
console.log(felyne.name); // 'Felyne'
    • controllers/users.js
    require('../utils/db')
//注册用户

const signup = (req, res, next) => {

    const { username, password } = req.body

    //这里直接使用模板，第一个参数是模板模板名称succ.ejs
    res.render('succ', {
        data: JSON.stringify({ username, password })
    })
}

exports.signup = signup
    • 运行：yarn start
    • 测试：insomnia:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qzxDqL6Z-1668266731499)(D:\Typora\imgs\image-20220829225000443.png)]

    • 结果：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUdXA9zz-1668266731499)(D:\Typora\imgs\image-20220829225020592.png)]

5.构建自己的schema

db.js

//...
//mongonDB里面的schema就相当于一个模型
var usersSchema = mongoose.Schema({
    username: String,
    password: String
});

//集合的名字
var Users = mongoose.model('users', usersSchema);

exports.Users = Users

我们把controller中对db.js的引用删除，提取出M层：model/users.js

const { Users } = require('../utils/db')

const signup = ({ username, password }) => {
    const users = new Users({
        username,
        password
    })
    users.save()
}

//下面两种写法是等价的
// exports.signup = signup
module.exports = {
    signup
}

controllers/users.js

const usersModel = require('../models/users')
//注册用户

const signup = (req, res, next) => {

    const { username, password } = req.body
    usersModel.signup({
        username,
        password
    })

    //这里直接使用模板，第一个参数是模板模板名称succ.ejs
    res.render('succ', {
        data: JSON.stringify({ username, password })
    })
}

exports.signup = signup

6.同异步问题与注册业务逻辑

controllers/users.js

const usersModel = require('../models/users')
//注册用户
const signup = async (req, res, next) => {

    const { username, password } = req.body

    //判断用户是否存在
    let findResult = await usersModel.findUser(username)
    console.log(findResult)
    if (findResult) {
        res.render('fail', {
            data: JSON.stringify({
                message: '用户名已存在'
            })
        })

    } else {
        //数据库里没有这个用户，开始添加用户
        let result = await usersModel.signup({
            username,
            password
        })
        console.log(result)
    }



    //这里直接使用模板，第一个参数是模板模板名称succ.ejs
    res.render('succ', {
        data: JSON.stringify({ username, password })
    })
}

exports.signup = signup

module/users.js

const { Users } = require('../utils/db')

const findUser = (username) => {
    return Users.findOne({ username })

}

const signup = ({ username, password }) => {
    const users = new Users({
        username,
        password
    })
    return users.save()

}

//下面两种写法是等价的
exports.signup = signup
exports.findUser = findUser
// module.exports = {
//     signup
// }

views/fail.ejs

{
"ret": true,
"errorCode": -1,
"data":<%- data %>
    }

7.密码加密-bcrypt

  • 安装：yarn add bcrypt

  • 创建工具js：

utils/tools.js

const bcrypt = require('bcrypt')

exports.hash = (myPlaintextPassword) => {

    return new Promise((resolve, reject) => {
        bcrypt.hash(myPlaintextPassword, 10, function (err, hash) {

            if (err) {
                reject(err)
            }
            resolve(hash)
        })
    });
}

controllers/users.js


const { hash } = require('../utils/tools')
//注册用户
const signup = async (req, res, next) => {
        //设置返回头
    res.set('content-type', 'application/json; charset=utf-8')

    //...
    //加密后的密码
    const bcryptPassword = await hash(password)

    //...
    } else {
        //数据库里没有这个用户，开始添加用户
        let result = await usersModel.signup({
            username,
            password: bcryptPassword
        })

    }
	//...
  • bcryptAPI:

    • hash(data,salt,cb)

    • salt:salt - [REQUIRED] - the salt to be used to hash the password. if specified as a number then a salt will be generated with the specified number of rounds and used

    • rounds=8 : ~40 hashes/sec
rounds=9 : ~20 hashes/sec
rounds=10: ~10 hashes/sec
rounds=11: ~5  hashes/sec
rounds=12: 2-3 hashes/sec
rounds=13: ~1 sec/hash
rounds=14: ~1.5 sec/hash
rounds=15: ~3 sec/hash
rounds=25: ~1 hour/hash
rounds=31: 2-3 days/hash

8.跨域访问CORS(backend)

  • 安装插件：yarn add cors

  • app.js中使用中间件

var cors = require('cors')

app.use(cors())

10.跨域访问webpack（frontend）

webpack.config.js


module.exports = {
	//...
    //配置dev-server
    devServer: {
  	//...
        port: 8080,
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                //pathRewrite: { "^/api": "" }
            }
        }
    }

}
  • 配置完要重启一遍，因为配置文件已经修改了

11.获取用户列表

1.backend

  • 路由：routes/users.js
//...
router.get('/list', list)
  • 控制层：controllers/users.js
//...
//用户列表
const list = async (req, res) => {
        res.set('content-type', 'application/json; charset=utf-8')
    const listResult = await usersModel.findList()
    res.render('succ', {
        data: JSON.stringify( listResult )
    })
}

exports.list = list
  • M层：modules/users.js
//...
const findList = () => {
    //排序
    return Users.find().sort({ _id: -1 })
}

exports.findList = findList

2.frontend

  • views/users-list.art
{{each data}}
<tr>
  <td>{{$index+1}}.</td>
  <td>{{$value.username}}</td>
  <td><button data-id="{{$value._id}}" class="btn btn-danger remove">删除</button></td>
</tr>
{{/each}}
  • controllers/index.js
import usersListTpl from '../views/users-list.art'

//...
const _list = () => {
    $.ajax({
        url: '/api/users/list',
        success(result) {
             $('#users-list').html(usersListTpl({
                data: result.data
            }))
            
            //console.log(result)
        }
    })
}

const index = (router) => {
    return (req, res, next) => {
        //渲染首页
        res.render(htmlIndex)
        //window.resize(),让页面撑满整个屏幕
        $(window, '.wrapper').resize()

        //填充用户列表
        $('#content').html(usersTpl())

        //渲染list
        _list()


        //点击保存，提交表单
        $('#users-save').html(usersTpl())


    }
}

const _signup = () => {
    const $btnClose = $('#users-close')
    //提交表单
    const data = $('#users-form').serialize()
    console.log(data)

    $.ajax({
        url: '/api/users/signup',
        type: 'post',
        data,
        success(res) {
            console.log(res)        
            //刷新
            _list()
        }
    })

}

12.分页（frontend）

  • views/users-pages.art
<ul class="pagination pagination-sm no-margin pull-right" id="users-page-list">
  <li><a href="#">&laquo;</a></li>
  {{each pageArray}}
  <li><a href="#">{{$index+1}}</a></li>
  {{/each}}
  <li><a href="#">&raquo;</a></li>
</ul>
  • controllers/index.js

import userListPageTpl from '../views/users-pages.art'

//...

const pageSize = 5
let dataList = []

const _loadData = () => {
    return $.ajax({
        url: '/api/users/list',
        async: false,
        success(result) {
            dataList = result.data
            //分页
            _pagination(result.data)
        }
    })
}
const _pagination = (data) => {

    const total = data.length
    //往上取整
    const pagesCount = Math.ceil(total / pageSize)
    const pageArray = new Array(pagesCount)

    const htmlPage = userListPageTpl({
        pageArray
    })

    $('#users-page').html(htmlPage)
    //默认添加第一个
    $('#users-page-list li:nth-child(2').addClass('active')
    $('#users-page-list li:not(:first-child , :last-child)').on('click', function () {
        $(this).addClass('active').siblings().removeClass('active')
        // console.log($(this).index())
        _list($(this).index())
    })

}

const _list = (pageNo) => {

    let start = (pageNo - 1) * pageSize
    $('#users-list').html(usersListTpl({
        //截取数据
        data: dataList.slice(start, start + pageSize)
    }))

}


const index = (router) => {
    return async (req, res, next) => {
        //渲染首页
        res.render(htmlIndex)
        //window.resize(),让页面撑满整个屏幕
        $(window, '.wrapper').resize()

        //填充用户列表
        $('#content').html(usersTpl())

        //初次渲染list
        _loadData()
        _list(1)


        //点击保存，提交表单
        $('#users-save').html(usersTpl())

    }
}

const _signup = () => {
    const $btnClose = $('#users-close')

    //提交表单
    const data = $('#users-form').serialize()
    console.log(data)

    $.ajax({
        url: '/api/users/signup',
        type: 'post',
        data,
        sucdess: async (res) => {
            console.log(res)
            //提交数据后渲染
            _loadData()
            _list(1)
        }
    })
    //单击关闭模拟框
    $btnClose.click()

}
//...

13.修改路由

backend/routes/users.js

var express = require('express');
var router = express.Router();

const { signup, list } = require('../controllers/users')

/* GET users listing. */
router.post('/', signup);
router.get('/', list)
// router.delete('/', remove)

module.exports = router;

frontend/controllers/index.js

//es6导入模块的方法
// import router from '../routers'
import indexTpl from '../views/index.art'
import signinTpl from '../views/signin.art'
import usersTpl from '../views/users.art'
import usersListTpl from '../views/users-list.art'
import userListPageTpl from '../views/users-pages.art'


const htmlIndex = indexTpl({})
const htmlSignin = signinTpl({})
const pageSize = 5
let dataList = []
const _handleSubmit = (router) => {
    return (e) => {
        e.preventDefault()
        router.go('/index')

    }
}

const _loadData = () => {
    return $.ajax({
        url: '/api/users',
        async: false,
        success(result) {
            dataList = result.data
            //分页
            _pagination(result.data)
        }
    })
}
const _pagination = (data) => {

    const total = data.length
    //往上取整
    const pagesCount = Math.ceil(total / pageSize)
    const pageArray = new Array(pagesCount)

    const htmlPage = userListPageTpl({
        pageArray
    })

    $('#users-page').html(htmlPage)
    //默认添加第一个
    $('#users-page-list li:nth-child(2').addClass('active')
    $('#users-page-list li:not(:first-child , :last-child)').on('click', function () {
        $(this).addClass('active').siblings().removeClass('active')
        // console.log($(this).index())
        _list($(this).index())
    })

}

const _list = (pageNo) => {

    let start = (pageNo - 1) * pageSize
    $('#users-list').html(usersListTpl({
        //截取数据
        data: dataList.slice(start, start + pageSize)
    }))

}



const signin = (router) => {
    return (req, res, next) => {
        res.render(htmlSignin)
        $('#signin').on('submit', _handleSubmit(router))

    }
}

const index = (router) => {
    return async (req, res, next) => {
        //渲染首页
        res.render(htmlIndex)
        //window.resize(),让页面撑满整个屏幕
        $(window, '.wrapper').resize()

        //填充用户列表
        $('#content').html(usersTpl())

        //初次渲染list
        _loadData()
        _list(1)


        //点击保存，提交表单
        $('#users-save').html(usersTpl())

    }
}

const _signup = () => {
    const $btnClose = $('#users-close')

    //提交表单
    const data = $('#users-form').serialize()
    console.log(data)

    $.ajax({
        url: '/api/users',
        type: 'post',
        data,
        sucdess: async (res) => {
            console.log(res)
            //提交数据后渲染
            _loadData()
            _list(1)
        }
    })
    //单击关闭模拟框
    $btnClose.click()

}

const signup = () => {

}



export {
    signin,
    index
}
孤影&碧空
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
node.js博客项目开发手记
10-18
本篇文章给大家总结了node.js博客项目开发的相关步骤以及知识点分享，有兴趣的朋友参考下。
支持es6的node.js项目
07-18
支持es6的nodejs项目，支持es6的nodejs项目，支持es6的nodejs项目！
node开发项目
weixin_44161385的博客
10-20 1431
用node写接口操作数据库开发项目
从零搭建NodeJS项目（小白教程）
qq_40702349的博客
03-10 1555
这边文章将介绍如何从零开始创建一个基于Express框架的Node.js项目。Express是一个快速、无拘束且极简的Node.js web应用框架，它提供了一系列强大的功能，使得web开发变得更加高效。
构建NodeJS库--前端项目的打包发布
带着Bug看世界
04-23 1393
如何初始化配置，以及学习npm配置项；模块类型type配置、main入口文件的配置；webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具；JavaScript通常需要做语法转化和polyfills以便可以使用高级语法而不必担心浏览器兼容性问题，Babel的作用便在于此，而正好可以与webpack结合使用；eslint一个好的项目离不开代码格式规范；jest用于测试用例。
字节跳动最爱考的前端面试题：Node.js 基础
前端劝退师
03-04 1218
前几天，跟我一朋友聊天，他现在是阿里的架构师，说：「他们根本不知道，现在的电商大促有多么依赖 Node.js。」说真的，我倒并不意外。作为一个定位明确的高性能 Web 服务器，Node.j...
Nodejs 项目发布和部署（阿里云）
AnitaSun的博客
12-19 3453
购买域名和服务器 域名 域名注册和购买 购买好之后在这个地址查看 服务器 云服务器ESC 境内需要备案，境外不需要备案 镜像选择Ubuntu 购买好之后在这里查看云服务器 ECS 实例 点击 管理 可以更改密码 连接到服务器 点击远程连接 可以使用 Windows Power Shell 进行连接 @后面的填入服务器的公网IP 域名解析 点击添加记录 主机记录中填入三级域名【随便起一个】 记录值中填入服务器公网IP地址 在bash中执行ssh root@XXX.XXX.XX
如何使用 Node.js 开发简易后端项目
游小北的博客
05-23 3094
node.js 开发博客项目笔记。
微信小程序云开发（SpringBoot+node.js项目实战）
02-07
微信小程序云开发（SpringBoot+node.js项目实战）
Node.js-node.jsexpress项目模板
08-10
node.js express 项目模板
Node.js项目实战完整版教学课件汇总
03-22
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，具有命令行工具、子进程、事件驱动、异步编程等特点。 Node.js 的优势包括单线程模式、非阻塞 I/O、轻量高效、事件驱动、异步编程等。 Node.js 的应用...
smerouter用纯JS编写的无依赖单页路由组件
08-10
用纯JS编写的无依赖单页路由组件
将node项目部署到云服务器详细教程 原创
CRMEB小程序商城的博客
04-21 1万+
前言： 需要有node项目，并且能在本地服务器成功运行成功 一、购买云服务器 云服务器种类很多，价格都差不多，我这里购买的是ecs计算型云服务器，配置2核4G5M的配置基本就可以运行项目。 服务器购买我选择的是ecs计算型云服务器。 购买步骤： 进入云服务器官网 选择服务器 配置选择2核4G5M 地域尽量选择国内（选国比较慢，但是不备案域名就可以访问，国内的服务器必须备案） 系统选择CentOS7.9-8.2版本就行 选择自定义密码，最好写文档记录，不然忘了又得重置密码 全部操作完成以后就付款购买 二、连接
搭建node.js项目
weixin_63112037的博客
09-13 477
node.js是基于Chrome V8引擎实现的JavaScript运行环境；npm就是node.js的包管理(package manager)。
IDEA创建Node.JS工程
书香水墨
03-02 4497
一、安装NodeJS插件 默认安装好了IDEA，在IDEA的file -> setting ->Plugins,在插件列表中搜索nodejs,将看到NodeJS插件，点击下载，重启。 二、创建NodeJS工程 在new project中就多出一项node.js ![](https://img-blog.csdnimg.cn/b31e817748284bfea688800e61d4310e.png?x-oss-process=image/watermark,type_d3F5LXplbm
[从入门到入土(后端篇)]一,nodejs项目搭建
阿文的博客
03-23 7492
博客网站后端使用nodejs开发,框架为koa2.
Vue开发实例目录总索引
热门推荐
编程界明世隐的博客
12-20 1万+
Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ >即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！
node项目从环境到上线
weixin_45711931的博客
01-12 987
2.将你的项目文件夹添加到开发工具工作区，打开对应路径下的终端，输入“npm init”命令创建package.json文件，具体会有很多选项让你填，如果想直接默认创建，则输入命令“npm init -y”一步创建成功。还有一点需要注意的是：npm安装一定要连外网的，公司的服务器没有连外网，我不知道，然后一直npm i不了，我头痛了很久才找到原因，大家不要像我这么“聪明”哦！一般来说，在选择安装路径时，都会自主选择路径，不然会默认安装在C盘，所以修改了安装路径，对应的环境配置和全局安装配置等都要修改。
参考Vue-router, 实现一个简单的前端路由
weixin_34336292的博客
03-09 178
demo github 思路 目前只实现了hash，整个思路是，我们有一个主文件Router.js，这个文件中我们定义了两大方法，use和route use的作用是将所有的中间件全push到Router的middleware数组里面。route方法里面，我们调用了this._matcher的addRoutes方法。this._matcher其实是createMatcher的实例。 route(...
node.js项目分享
最新发布
06-02
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以实现后端的编程。在Node.js的生态系统中，有很多优秀的开源项目，以下是一些值得分享的Node.js项目： 1. Express：是一个快速、灵活、极简的 Node.js Web 应用程序框架，可以用来构建各种类型的web应用。 2. Socket.IO：是一个实时的、双向通信的JavaScript库，可以让你在浏览器和服务器之间建立实时通信。 3. PM2：是一个现代化的生产环境进程管理器，可以帮助你简化应用程序的管理和部署。 4. NestJS：是一个用于构建高效、可扩展的Node.js服务器端应用程序的框架，使用TypeScript编写。 5. Nodemailer：是一个Node.js模块，可以让你轻松地发送电子邮件。 6. Mongoose：是一个优雅的MongoDB对象建模库，可以为你的Node.js应用程序提供异步、快速、安全的访问MongoDB数据库的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值