Koa2 SSR打造官网PC展示页 1

最新推荐文章于 2022-04-07 21:19:44 发布
最新推荐文章于 2022-04-07 21:19:44 发布
阅读量487 收藏 1
点赞数 2
分类专栏： 实战项目 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/111945704
版权

一.项目展示、项目初始化及基本配置

(1).创建项目

koa2创建项目

koa2 jsplusplus
 cd jsplusplus && npm install

(2).项目配置

基础文件移入

package.json

webpack.config.js

.babelrc

.gitignore

再install一下

npm install

(3).目录及文件改造

创建configs目录

1.db.js

const ENV = require('./env');

module.exports = {
    MYSQL_CONF: {
        base: {
            host: 'localhost',
            dialect: 'mysql',
            pool: {
                max: 5,
                min: 0,
                idle: 10000
            }
        },
        conf: ['txclass', 'root', ENV.isPrd ? 'xxx' : '12345678']
    }
};

2.db_type.js

const Sequelize = require('sequelize');

module.exports = {
    STRING: Sequelize.STRING,
    INT: Sequelize.INTEGER,
    DECIMAL: Sequelize.DECIMAL,
    TEXT: Sequelize.TEXT
}

3.env.js

const ENV = process.env.NODE_ENV;

module.exports = {
    isDev: ENV === 'dev',
    isPrd: ENV === 'production'
}

4.link.js

module.exports = [
  {
    title: '腾讯课堂 - JS++',
    link: '//msiwei.ke.qq.com',
    logoUrl: '//tximg.jsplusplus.com/txclass.png'
  },
  {
    title: 'bilibili - JS++',
    link: '//space.bilibili.com/378372969',
    logoUrl: '//tximg.jsplusplus.com/bilibili.png'
  },
  {
    title: '今日头条 - JS++',
    link: '//www.toutiao.com/c/user/104117716175/#mid=1610678420152324',
    logoUrl: '//tximg.jsplusplus.com/toutiao.png'
  }
];

5.manual.js

module.exports = [
  {
    title: 'jQuery',
    logoUrl: '//img.jsplusplus.com/website/sprites/link_sprites.png',
    link: 'https://api.jquery.com/',
    bgSize: '528px 320px',
    bgPosition: '-186px -10px'
  },
  {
    title: 'Git',
    logoUrl: '//img.jsplusplus.com/website/sprites/link_sprites.png',
    link: 'https://git-scm.com/',
    bgSize: '528px 320px',
    bgPosition: '-10px -90px'
  },
  {
    title: 'VueJS',
    logoUrl: '//img.jsplusplus.com/website/sprites/link_sprites.png',
    link: 'https://cn.vuejs.org/v2/guide/',
    bgSize: '528px 320px',
    bgPosition: '-186px -250px'
  },
  {
    title: 'ReactJS',
    logoUrl: '//img.jsplusplus.com/website/sprites/link_sprites.png',
    link: 'https://doc.react-china.org/',
    bgSize: '528px 320px',
    bgPosition: '-186px -170px'
  },
  {
    title: 'NodeJS',
    logoUrl: '//img.jsplusplus.com/website/sprites/link_sprites.png',
    link: 'https://nodejs.org/zh-cn/docs/',
    bgSize: '528px 320px',
    bgPosition: '-186px -90px'
  },
  {
    title: 'Webpack',
    logoUrl: '//img.jsplusplus.com/website/sprites/link_sprites.png',
    link: 'https://webpack.js.org/concepts/',
    bgSize: '528px 320px',
    bgPosition: '-362px -10px'
  }
];

6.nav.js

module.exports = [
  {
    title: '就业班',
    link: '//ke.qq.com/course/391728'
  },
  {
    title: '提升班',
    link: '//ke.qq.com/course/438871'
  },
  {
    title: '全修班',
    link: '//ke.qq.com/course/334138'
  },
  {
    title: '架构班',
    link: '//ke.qq.com/course/1185455'
  }
];

7.pages.js

const env = require('./env'),
      isPrd = env.isPrd;

const URL = {
    SOURCE: isPrd ? '//source.jsplusplus.com/' : '//localhost:3300/'
}

module.exports = {
    INDEX: {
      HEAD: {
            TITLE: '妙思维JS++前端开发官方网站 - WEB|JavaScript|Vue|React|Node',
            KEYWORD: '前端开发,WEB开发,在线课程,编程,项目实战,项目架构,JavaScript,Vue,React,Node',
            DESCRIPTION: 'JS++前端开发工程师精英就业班与提升班课程是针对前端开发零基础、爱好者、职业技术提升、互联网创业相关人员的一套完整的WEB前端开发学习体系，该体系通过深度基础课程对学员进行培养，使学员掌握最完整最有深度的技术理论知识和实战的基础技能。',
          FAVICON: '/img/logo108.png'
        },
        STYLESHEETS: [
      URL.SOURCE + 'css/index.css'
        ],
        SCRIPTS: [
      URL.SOURCE + 'js/index.js'
        ]
    },
    LIST: {
      HEAD: {
            TITLE: '妙思维JS++前端开发官方网站 - WEB|JavaScript|Vue|React|Node',
            KEYWORD: '前端开发,WEB开发,在线课程,编程,项目实战,项目架构,JavaScript,Vue,React,Node',
            DESCRIPTION: 'JS++前端开发工程师精英就业班与提升班课程是针对前端开发零基础、爱好者、职业技术提升、互联网创业相关人员的一套完整的WEB前端开发学习体系，该体系通过深度基础课程对学员进行培养，使学员掌握最完整最有深度的技术理论知识和实战的基础技能。',
          FAVICON: '/img/logo108.png'
        },
        STYLESHEETS: [
      URL.SOURCE + 'css/list.css'
        ],
        SCRIPTS: [
      URL.SOURCE + 'js/list.js'
        ]
    },
    ERROR: {
      HEAD: {
            TITLE: '妙思维JS++前端开发官方网站 - WEB|JavaScript|Vue|React|Node',
            KEYWORD: '前端开发,WEB开发,在线课程,编程,项目实战,项目架构,JavaScript,Vue,React,Node',
            DESCRIPTION: 'JS++前端开发工程师精英就业班与提升班课程是针对前端开发零基础、爱好者、职业技术提升、互联网创业相关人员的一套完整的WEB前端开发学习体系，该体系通过深度基础课程对学员进行培养，使学员掌握最完整最有深度的技术理论知识和实战的基础技能。',
          FAVICON: '/img/logo108.png'
        },
        STYLESHEETS: [
      URL.SOURCE + 'css/error.css'
        ],
        SCRIPTS: [
      URL.SOURCE + 'js/error.js'
        ]
    }
}

8.qr.js

module.exports = {
    infomation: '//tximg.jsplusplus.com/qr_infomation.jpg'
};

9.url.js

module.exports = {
    IMG_BASE_URL: '//tximg.jsplusplus.com/'
}

新建控制器

class Home{
    async index(ctx,next){
        await ctx.render('index',{
            title:'首页'
        })
    }
    async list(ctx,next){
        await ctx.render('list',{
            title:'列表页'
        })
    }
    async error(ctx,next){
        await ctx.render('error',{
            title:'错误页面'
        })
    }
}
module.exports = new Home();

删除routes下的

user.js,app.js中也得删除user得引入和注册

index路由中

const router = require('koa-router')(),
      controller = require('../controllers/Home')

router.get('/', controller.index)

router.get('/list/:kw?',controller.list)

router.get('/error',controller.error)

router.get('*',controller.error)

module.exports = router

删除整个view文件夹

在src中建立views,里面建立三个页面的ejs

app.js中更改

app.use(views(__dirname + '/src/views', {
  extension: 'ejs'
}))

解决'NODE_ENV' 不是内部或外部命令报错

npm install cross-env –save-dev

再在NODE_ENV=xxxxxxx前面添加cross-env

访问路由测试

npm run dev启动

建立db文件夹

db中建立models文件且拷入

在db中建立db_connect.js

const Sequelize = require('sequelize'),
      { MYSQL_CONF } = require('../configs/db');

const seq = new Sequelize(...MYSQL_CONF.conf, MYSQL_CONF.base);

module.exports = seq;

建立lib文件夹中再建立utils

更改public下的文件夹名称且删除文件

再建立services文件夹

在src中建立config文件夹中建立config.js

const URL = {
    IMG_BASE_URL: '//tximg.jsplusplus.com/'
}

建立js文件夹其中建立index.js list.js error.js入口文件

建立modules

建立styles且拷入文件

建立templates

建立utils 再建立tool.js

npm run webpack 启动

二.完成layout模板编写以及公共样式引入

(1).变更控制器

const PAGE_CONF = require('../configs/page')
class Home{
    async index(ctx,next){
        await ctx.render('index',{
            title:'首页',
            PAGE_CONF:PAGE_CONF.INDEX
        })
    }
    async list(ctx,next){
        await ctx.render('list',{
            title:'列表页',
            PAGE_CONF:PAGE_CONF.LIST
        })
    }
    async error(ctx,next){
        await ctx.render('error',{
            title:'错误页面',
            PAGE_CONF:PAGE_CONF.ERROR
        })
    }
}
module.exports = new Home();

(2).在views中建立layout文件夹里面建立foot.ejs head.ejs

head.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

foot.ejs

</body>
</html>

编辑引入

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <% 
    var HEAD = PAGE_CONF.HEAD,
        STYLES = PAGE_CONF.STYLESHEETS;
    %>
    <meta charset="UTF-8">
    <meta name="keyword" content="<%= HEAD.KEYWORD %>" />
    <meta name="description" content="<%= HEAD.DESCRIPTION %>" />
    <meta rel="shortcut icon" href="<%= HEAD.FAVICON %>" type="image/x-icon" />
    <title><%= HEAD.TITLE %></title>
    <% for (var i = 0; i < STYLES.length; i ++) { %>
    <link rel="stylesheet" href="<%= STYLES[i] %>" />
    <% } %>
</head>
<body>

foot.ejs

<%
  var SCRIPTS = PAGE_CONF.SCRIPTS;
%>

<% for (var i = 0; i < SCRIPTS.length; i ++) { %>
  <script src="<%= SCRIPTS[i] %>"></script>
<% } %>

</body>
</html>

(3).views下的各个ejs页面中引入|

<%- include('layout/head.ejs', { PAGE_CONF }) %>

<H1>INDEX</H1>

<%- include('layout/foot.ejs', { PAGE_CONF }) %>{PAGE_CONF}%>

(4).js下的入口文件引入

复制到3个文件中

import $ from 'jquery';

import '../styles/resets.css';
import '../styles/common.css';
import '../styles/iconfont.css';
import '../styles/ui.scss';
import '../styles/header.scss';
import '../styles/courseNav.scss';
import '../styles/courseList.scss';
import '../styles/courseItem.scss';
import '../styles/noDataTip.scss';
import '../styles/footer.scss';

(5).更改layout中的ejs

<html lang="zh-CN">

三.header部分抽离子模板、模板出口设计

(1).建立文件夹

views中新建template

template中建立common

common中建立 header

header中建立header.ejs logo.ejs nav.ejs search.ejs

(2).编写模板

index.ejs中


<header class="header">
    <%- include('logo.ejs')%>
    <%- include('nav.ejs',{navData})  %> 
    <%- include('search.ejs') %> 
</header>

controller中

const PAGE_CONF = require('../configs/page'),
      navData = require('../configs/nav');
class Home{
    async index(ctx,next){
        await ctx.render('index',{
            title:'首页',
            PAGE_CONF:PAGE_CONF.INDEX,
            navData
        })
    }
    async list(ctx,next){
        await ctx.render('list',{
            title:'列表页',
            PAGE_CONF:PAGE_CONF.LIST
        })
    }
    async error(ctx,next){
        await ctx.render('error',{
            title:'错误页面',
            PAGE_CONF:PAGE_CONF.ERROR
        })
    }
}
module.exports = new Home();

views下的index.ejs

<%- include('layout/head.ejs', { PAGE_CONF }) %>


<div class="container">
    <%- include('template/common/header/index.ejs') %> 
</div>

<%- include('layout/foot.ejs', { PAGE_CONF }) %>

header中的logo.ejs

<div class="header-logo">
  <a href="/" class="logo-lk"></a>
</div>

nav.ejs

<div class="header-nav">
    <ul class="nav-list clearfix">
        <% for(var i = 0; i<navData.length; i++){ 
            var item = navData[i]
        %> 
            <li class="nav-item">
                <a href="<%= item.link%>" class="nav-lk" target="_blank">
                    <%= item.title%>
                    <i class="iconfont icon-arrow-right"></i>    
                </a>
            </li>
        <%}%>
    </ul>
</div>

search.ejs

<div class="header-search">
    <div class="search-wrap J_headerSearch">
        <input type="text" class="input input-search" placeholder="搜索课程"/>
        <button class="btn btn-search">
            <i class="iconfont icon-search"></i>
        </button>
    </div>
</div>

<div class="header-search">     <div class="search-wrap J_headerSearch">         <input type="text" class="input input-search" placeholder="搜索课程"/>         <button class="btn btn-search">             <i class="iconfont icon-search"></i>         </button>     </div> </div>

可乐雪碧薄荷糖
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node.js-koa2中文文档
08-10
koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。
Koa2 SSR打造官网PC展示页 6
Yesterday_Tomorrow的博客
02-01 194
十六.课程搜索展示与无结果提示 1.list中建立noDataTip文件夹 index.ejs <div class="no-data-tip"> <h1>-没有搜索到相关数据-</h1> </div> 2.入口文件中导入样式 import '../styles/noDataTip.scss'; 3.控制器中 async list(ctx,next){ const keyword = ctx.params
Koa2
finedayforu的博客
03-12 221
koa2官网: https://koa.bootcss.com/ 一. 安装koa2 Koa 依赖 node v7.6.0 或 ES2015及更高版本和 async 方法支持. cnpm i koa --save 二. hello world const Koa = require('koa')//引入Koa const app = new Koa(); //实例化Koa app.use(...
koa2官网更新koa-generator的坑
weixin_34297300的博客
03-14 635
前几天koa官网发布了koa2版本...之前一直用狼叔的koa-generator搭的项目运行不了，运行一直报错，后来发现是node版本低了，不能支持koa2上面的es6语法，然后就从4.6.6更新到6.10.1版本才能正常运行………… 转载于:https://www.cnblogs.com/samsimi/p/6547594.html...
Koa2 SSR打造官网PC展示页 2
Yesterday_Tomorrow的博客
12-30 581
四.获取轮播图数据以及父子模板拆分 (1).在services文件夹中新建slider.js const SliderModel = require('../db/models/slider'); class SliderService{ async getSliderData(){ return await SliderModel.findAll({ where:{status:1}, attributes:{
vue ssr+koa2构建服务端渲染的示例代码
10-15
主要介绍了vue ssr+koa2构建服务端渲染的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue全家桶+SSR+Koa2全栈开发美团网
12-11
Vue全家桶+SSR+Koa2全栈开发美团网
koa2-vue-ssr-template：具有SSR呈现和Koa2 API的VueJS入门套件
02-04
Koa2-Vue-SSR-模板具有SSR渲染和Koa2 API的VueJS StarterKit到底是什么？ Koa2-API Vue.js + SSR Sequelize-用于安全的数据库查询和可重用模型配置-更好的环境配置Axios-用于基于统一Promise的HTTP请求（客户端和...
详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
10-17
主要介绍了详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
koa2Demo1:koa 2学习计划
05-14
koa2koa2 学习笔记koakoa是Express的下一代基于Node.js的web框架，目前有1.x和2.0两个版本,2.0基于ECMA7 async awaitBabelBabel是一个JavaScript编写的转码器，它可以把高版本JavaScript代码转换成低版本JavaScript...
React-SSR：使用nextjs + koa2实现React服务端渲染（SSR）
02-03
使用next + koa2实现React服务端渲染 项目创造方式： // 法1： npm init npm i react react-dom next -S 配置package.json里的scripts 新建各个文件 // 法2： npm i -g create-next-app npx create-next-app testApp 需要先安装redis并启动环境： 启动方式： npm i // 开发模式启动 npm run dev // 打包资源分析 npm run analyze:browser // 部署 npm run build npm start SSR页面渲染流程：
「新手向」koa2从起步到填坑
weixin_30622107的博客
08-02 253
前传 出于兴趣最近开始研究koa2，由于之前有过一些express经验，以为koa还是很好上手的，但是用起来发现还是有些地方容易懵逼，因此整理此文，希望能够帮助到一些新人。 如果你不懂javascript，建议你先去撸一遍红宝书javascript高级程序设计如果你不熟悉ES6，建议你先去撸一遍阮一峰老师的ECMAScript 6入门 因为我也是新人，我只是整理了我的学习经历，如何填...
Koa2小结
BlackStar的博客
04-07 712
一、Koa2介绍 Koa2框架是基于Node.js的一个下一代Web开发框架 官网: https://koa.bootcss.com 通过async/await 语法高效编写Web Server 中间件机制，能合理拆分业务代码 什么是框架？ 封装原生代码的API；规范开发的流程和格式；让开发人员更加关注于业务代码和开发效率。 框架和库的区别？ 框架(frame)是唯一的，库(lib)是可以...
Koa2 学习文档
pingsoli
08-02 4245
说明koa是express的轻量级版本。koa不绑定任何的中间件，但是依赖中间件来完成指定的任务。koa中提供了很少的API，所以koa整体上很小。 下面文档介绍了koa基础知识，并且加上了一个小例子。 注意：koa 1.x 和 koa 2.x有一些不同，下面内容都是围绕koa 2.x做介绍。 Koa安装$ mkdir mypp && cd myapp $ npm init $ npm i
koa2学习笔记
dan_seek的博客
01-17 584
由 Express 原班人马打造的 koa，致力于成为一个更小、更健壮、更富有表现力的 Web 框架。使用 koa 编写 web 应用，通过async function，可以免除重复繁琐的回调函数嵌套，并极大地提升常用错误处理效率。 安装 npm install koa 官网：https://koajs.com/ Hello world const Koa = require('koa'); const app = new Koa(); // logger app.use(async (ctx, n.
koa2 入门学习（一）
Juwenzhe_HEBUT的博客
09-18 462
koa2 入门 koa2是什么 koa2基本用法 koa2进阶 一、koa2是什么 官网地址：https://koa.bootcss.com/ 1.基于nodejs平台的下一代web开发框架 2.Express原班人马打造，更精简 3.Async+await处理异步 4.洋葱圈型的中间件机制 二、koa2基本用法 dem...
Koa2 框架入门与进阶
weixin_49809163的博客
06-23 1710
Koa 是一个新的 **web 框架**，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 利用 **async 函数** 丢弃传统的回调函数，并增强错误处理。Koa 没有 **任何预置** 的中间件，可快速而愉快地编写服务端应用程序。 koa 是基于 nodejs 平台的下一代 web 开发框架（koa2 是 nodejs web server 框架）
koa2 引擎模版html,Koa2模板引擎Ejs使用教程
weixin_35452656的博客
06-03 242
EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。Koa2框架中ejs可以把数据库查询的数据渲染到模板上面，实现一个动态网站。Koa2 中使用ejs模板引擎的用法：1、安装 koa-views 和ejs1.安装koa-views npm install --save koa-views / cnpm install --save koa-views2.安装ej...
koa2教程(一)-快速开始
weixin_33725807的博客
01-16 130
来自Koa官网对于Koa的简介: koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用，通过组合不同的 async函数，可以免除重复繁琐的回调函数嵌套， 并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件， 它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。 简而言之Koa就是...
Node.js与Koa2：打造下一代Web应用，从基础到实战部署
《Node.js与Koa2构建下一代Web应用：异步与await实践》是一本深度讲解Node.js开发的实战指南，特别关注Koa2框架。本书适合对JavaScript有一定了解、具备Web开发基础，并已接触过AngularJS或ReactJS的开发者。作者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值