前后端不分离项目思路（页面布局注意点暂时不包含数据库·上篇）

最新推荐文章于 2024-05-24 18:29:34 发布

code crowning

最新推荐文章于 2024-05-24 18:29:34 发布

阅读量2k

点赞数 3

分类专栏： node 文章标签： nodejs

本文链接：https://blog.csdn.net/qq_44811769/article/details/114000892

版权

1.项目用了node中express的项目生成器，需要使用node中npm的包管理器下载express-generator 工具，下完之后用express projectName命令搭建，express后面是创建的项目名，等等操作，我还下了一个nodemon的工具自动刷新就不用每次开关服务（具体操作想知道的可以问我，这里我就不写了）

2页面从bootstrap用cv大法找模板，更改了路径，删减和增添了一些配置，公共部分我分别放在了一个单独的文件，使用include插入
格式：
<%- include("./aside.ejs")%>
<%=%> -和=的区别就是=放的是数值三目表达式也是用=，-是可以解析里面代码的

3.配置路由，导入express模块，express有个Router的方法建立路由，app.js文件里面注册路由，用app.use命令设置的：
app.use(’/pro’, proRouter);
第一个参数是设置的路由路径，第二个参数是专门设置的相应路由文件】。
这个文件要在Router方法前引入：
var proRouter = require(’./routes/pro’);），
路由接受请求收到的两个参数：
router.get(’/’, function(req, res, next) {
res.render(“pro”,{
index:3
})
});
第一个参数是设置的路由路径，第二个是个函数，函数里面放了三个参数，第一个是req 请求头，第二个res 响应头，第三个next，这里的next是防止把下面的路由请求拦截掉。然后后面采取，res.render()方法渲染模板，这个方法也有两个参数，第一个参数是静态页的路径，第二个参数是个对象，里面放入静态页需要的用到的变量，配置完记得把模块暴露出来，路由配置完记得在导航用a标签关联上去，完成跳转
这里再补充一行代码：
res.redirect("/pro")这个是路由的重定向,是在添加数据完成后，返回并展示最新的数据时使用找到需要返回路由的路径就可以，下面放代码再详说一下

代码我就不全放了：
先放个node服务器代码

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 proRouter = require('./routes/pro');
var lbtRouter = require('./routes/lbt');
var informRouter = require('./routes/inform');
var shoppingRouter = require('./routes/shopping');
var userRouter = require('./routes/user');

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('/pro', proRouter);
app.use('/lbt', lbtRouter);
app.use('/inform', informRouter);
app.use('/shopping', shoppingRouter);
app.use('/user', userRouter);

// 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;

结合上面应该好理解许多

放静态文件pro.ejs格式

<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Starter</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/stylesheets/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/stylesheets/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/stylesheets/AdminLTE.min.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect. -->
  <link rel="stylesheet" href="/stylesheets/skin-blue.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

最低0.47元/天解锁文章

code crowning

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
前后端不分离项目思路（页面布局注意点暂时不包含数据库·上篇）

1.项目用了node中express的项目生成器，需要使用node中npm的包管理器下载express-generator 工具，下完之后用express projectName命令搭建，express后面是创建的项目名，等等操作，我还下了一个nodemon的工具自动刷新就不用每次开关服务（具体操作想知道的可以问我，这里我就不写了）2页面从bootstrap用cv大法找模板，更改了路径，删减和增添了一些配置，公共部分我分别放在了一个单独的文件，使用include插入格式：<%- include(
复制链接

扫一扫