2024年Web前端最全礼物帮手App项目（1）-环境搭建，备战三个月

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

两个电脑的node版本不一样，我干脆卸载了node重装了一下

https://blog.csdn.net/fengtingYan/article/details/87876817

1 搭建好脚手架，安装教程

2 先搞api接口

mongo也下载安装好了 安装mongodb软件及配置

参考之前的文章：使用express生成器自动创建项目

2.1. 先安装生成器：

npm install express-generator -g

2.2. 再创建项目：

express project-name --ejs

–ejs是视图模板

视图模板有很多，常用的有ejs,art-template,pug(jade),handlebars

安装mongoose

安装好以后的项目结构

2.3. 安装项目所依赖的模块包：

cd 项目名称 npm install

2.4. 运行项目：

npm start 或者node ./bin/www

默认浏览器访问 localhost:3000

接下来就是 连接mongo和node了

db.js

// 访问数据模块

// 操作mongodb数据所使用的模块包，mongoose中封装大量操作数据库的api，先引入再使用。

var mongoose = require(‘mongoose’);

// 先连接数据库

mongoose.connect(‘mongodb://127.0.0.1:27017/demo’, {useNewUrlParser: true});

// 集合结构（架构）

var swiperSchma = new mongoose.Schema({

src: {

type: String,

required: true

},

title: {

type: String,

required: true

}

})

var giftSchma = new mongoose.Schema({

src: {

type: String,

required: true

},

title: {

type: String,

required: true

},

info:{

type: String,

required: true

},

price:{

type: String,

required: true

},

count:{

type: String,

required: true

}

})

// 集合模型

var swiperModel = mongoose.model(‘swiper’, swiperSchma);

var giftModel = mongoose.model(‘gift’,giftSchma);

module.exports = {

swiperModel,

giftModel

}

routes/index.js

var express = require(‘express’);

var router = express.Router();

var db = require(‘…/modules/db’);

/* GET home page. */

router.get(‘/’, function(req, res, next) {

res.render(‘index’, { title: ‘Express’ });

});

router.get(‘/addData’, function(req, res, next){

var docs = [

{ src: ‘/images/swipers/1.jpg’, title: ‘直尺书签’},

{ src: ‘/images/swipers/2.jpg’, title: ‘羽毛书签’},

{ src: ‘/images/swipers/3.jpg’, title: ‘迷你书签’},

{ src: ‘/images/swipers/4.jpg’, title: ‘钢笔’},

{ src: ‘/images/swipers/5.jpg’, title: ‘戒指’},

{ src: ‘/images/swipers/6.jpg’, title: ‘火漆印章’}

];

db.swiperModel.insertMany(docs, function(err, result){

res.json({code: 200, message: ‘成功’})

});

})

router.get(‘/addGifts’,function(req,res,next){

var docs2 = [

{ src: ‘/images/gift/1.jpg’, title: ‘直尺书签’,price:‘￥23’,count:‘233’,info:‘他的作用可不小，可当直尺使用，承载着对学生时代的怀念和对美好生活的追求。’},

{ src: ‘/images/gift/2.jpg’, title: ‘迷你书签’,price:‘￥10’,count:‘23’,info:‘小巧玲珑，身躯虽小，但所承载的记忆不少，表面嵌有带有中北校徽，独具一格。’},

{ src: ‘/images/gift/3.jpg’, title: ‘羽毛书签’,price:‘￥13’,count:‘253’,info:‘羽毛的形态美观，表面嵌有带有中北校徽，独具一格。使得其既有实用性，又有珍藏意义。’},

{ src: ‘/images/gift/4.jpg’, title: ‘钢笔’ ,price:‘￥35’,count:‘221’,info:‘中北定制版钢笔，送出去的不仅是如笔尖般的细腻的情愫，更是一种你若不离，我便不弃的决心。’},

{ src: ‘/images/gift/5.jpg’, title: ‘钛钢戒指’,price:‘￥28’,count:‘253’,info:‘外壁刻有“中北大学”及校徽，内壁根据购买者意专属定制。美观大方，便于携带。有很好的纪念意义。’},

{ src: ‘/images/gift/6.jpg’, title: ‘火漆印章’,price:‘￥99’,count:‘653’,info:‘火漆有多种颜色，木盒采用复古色且刻有“中北大学”及校徽。用来封信件等都有极高贵奢华的感受。’},

{ src: ‘/images/gift/7.jpg’, title: ‘木质书签’,price:‘￥56’,count:‘233’,info:‘表面刻有校训——致知于行。其上端准有缀以纯色流苏，以端庄大方的盒子包装，给人以美的感受。’},

{ src: ‘/images/gift/8.jpg’, title: ‘宝珠笔’,price:‘￥25’,count:‘213’,info:‘中北定制版宝珠笔，带给你高贵的体验，承载着对学生时代的怀念和对美好生活的追求。’},

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记