前端实习近期小结

有一小段时间没有更新了，年前的业务需求比较多而且急，今日凌晨（2点多还在修改、提交代码到库）还好这次是远程办公，忙完还可以立马洗澡休息..

忙里偷闲，更新一下前端实习近况吧。现在写这篇博客的心情也比较轻松，写到哪算哪吧...

从以下两点大概讲一下：

一、业务需要方面

关于处理业务需求

实际上是从实习第一个月的月末开始，一开始就是一边学习一边做着一些需求，可能一开始对实习生的包容性比较大，会给比较多的时间去适应。后来开始跟着我的领导做需求。上班时间基本上就是在做业务需求，当然了，在业务需求中不断学习也是一种可取方恨。当然不得不说的是：跟着领导干，认真学习和做事，总是可以学到很多。

关于技术栈

最近的业务需求用得比较多的是react和antd组件库。

关于开发过程的心得

这一点就有很多想说的。

一般情况，业务需求是组长给的，一开始就可以获取到一些项目资源：项目链接、本次的需求文档、原型图、开发接口等等。

但是我们要做好心理准备：“不是等到万事具备，才开始动手做事。”

很多时候，由于各种因素，团队的进度可能会不一样（比如某个接口没给、原型图的细节没有补充、接口字段没有补充完善等等）（这些情况我都遇到）但还是我们还是得先开发，比如前端常见的页面开发、功能函数撰写、封装接口函数等等。

协作开发的时候，有一点非常重要，那就是“沟通”！！！比如当需求细节不太明确的时候，找项目成员（可能是组长/前端/后端）核对一下本次开发需求。（比如表的字段、用的方法等等）必要的时候，可以约个时间拉个线上会议，核对完毕，确保你的业务需求是100%明确的。相信我，做好这一点，后续的开发会节省非常多时间和避免不必要的麻烦。

二、个人前端学习方面

express-generator

最近个人学习的内容，首先要讲的是express-generator

express-generator 是一个官方工具，用于快速生成一个 Express 项目的骨架。 它提供了一个命令行界面，允许开发者通过简单的命令快速创建一个新的 Express 应用程序，包括基本的目录结构和文件。

应用场景

1. 快速启动新项目：当开发者需要快速开始一个新的 Express 项目时，express-generator 可以迅速生成项目的基础结构，节省手动设置项目的时间。
2. 遵循最佳实践：express-generator 生成的项目遵循最佳实践，包括代码组织、目录结构和命名规范，有助于保持代码的可维护性。
3. 提供基本的目录结构和文件：express-generator 为生成的应用程序提供了基本的目录结构和文件，如 index.js、package.json 等，使得开发者可以立即开始开发应用程序。
4. 易于定制：开发者可以根据自己的需求对生成的代码进行定制和修改。

对于前端开发者的作用

1. 理解后端结构：前端开发者可以通过 express-generator 快速了解和体验后端项目的基本结构和工作流程，这对于前后端协作和全栈开发尤其有用。
2. 前后端分离开发：在现代 Web 开发中，前后端分离是一种常见的模式。express-generator 可以帮助前端开发者快速搭建后端 API，以便与前端项目集成。
3. 提升开发效率：express-generator 提供的脚手架功能可以减少前端开发者在设置后端项目时的重复工作，让他们更专注于前端逻辑和用户体验的实现。
4. 测试和原型开发：前端开发者可以使用 express-generator 快速搭建一个后端服务，用于测试前端应用的接口调用或者快速原型开发。

 我之前发的博客有一篇是关于express搭建本地服务器的简单使用，有兴趣可以聊一下。

【Express】用express搭建本地服务器（轻松上手）

 后续的学习过程中，我发现用express-generator脚手架，可以非常方便地创建和使用express项目，比如像启动服务的基本框架给你写好了，也有使用路由案例。因此在此也推荐这个工具给大家（关于如何使用，本篇文章就暂且不作演示，后续再考虑写一篇博客专门介绍如何开发使用）

以下是本人使用express-generator的一个案例。后续考虑补充完善写一篇博客。

//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 expressJWT=require('express-jwt')
const md5 = require('md5');
const session = require("express-session");
const {ForbiddenError, ServiceError, UnknownError}=require('./utils/errors')

// 创建服务器实例
var app = express();


// 默认读取项目根目录下的.env环境变量文件
require("dotenv").config()
// 获取异步请求-错误
require("express-async-errors");
// 引入数据库
require('./dao/db')

// 引入路由
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var adminRouter = require('./routes/admin');
var bannerRouter = require('./routes/banner');
var uploadRouter = require('./routes/upload');
// var blogTypeRouter = require('./routes/blogType');
var captchaRouter= require('./routes/captcha')
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');


// 创建会话
app.use(session({
  secret : process.env.SESSION_SECRET,
  resave : true,
  saveUninitialized : true
}))


// 使用各种中间件
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')));

// 配置验证 token 接口
app.use(expressJWT({
  secret : md5(process.env.JWT_SECRET), // 我们所设置的秘钥
  algorithms : ['HS256'], // 新版本的 expressJWT 必须要求指定算法
}).unless({
  // 需要排除的 token 验证的路由
  path : [
    {"url" : "/api/admin/login", methods : ["POST"]},
    {"url" : "/res/captcha", methods : ["GET"]},
    {"url" : "/api/banner", methods : ["GET","POST"]},

  ]
}))

// 使用路由中间件
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api/admin',adminRouter);
// app.use('/api/blogtype',blogTypeRouter);
app.use('/api/banner',bannerRouter);
app.use('/api/upload',uploadRouter);
app.use('/res/captcha', captchaRouter);



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

// 错误处理，有发生错误则跳转到这里
app.use(function(err, req, res, next) {

  console.log("err.name>>>",err.name);
  console.log("err.message>>>",err.message);
  if (err.name === 'UnauthorizedError') {
    // 说明是 token 验证错误，接下来我们来抛出我们自定义的错误
    console.log("res===>>>",res);
    res.send(new ForbiddenError("未登录，或者登录已经过期").toResponseJSON());
  }else if(err instanceof ServiceError){
    res.send(err.toResponseJSON())
  }else{
    res.send(new UnknownError().toResponseJSON())
  }
  // 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;

nodejs

对于前端开发者来说，nodejs是一个绕不过去的坎，还是得稳固自己的“护城河”

以下分享一些nodejs的总结

开发依赖和生产依赖

开发 npm i -D xx

生产 npm i --save xx

注意： npm i xx 等同于 npm i xx --save

比较好理解的一个比喻：蛋炒饭制作（食材：鸡蛋、米饭、大葱。工具：锅、煤气等 最终端上来使用的，就是“生产依赖”（在开发过程中，同样会使用到）而像锅、煤气等等，则是“开发依赖”

全局安装 npm i xx -g

任何目录都能运行的包/库 node_modules的位置？ npm root -g

修改windows执行策略

解决windows默认阻止全局安装或者使用

set-ExxecutionPolicy remoteSigned

npm配置别名

比如 node ./02_demo.js

项目下的package.json的scripts
"server":"node ./02_demo.js"
​
>>>>>
执行 npm run server  等于执行 node ./02_demo.js

npm run start === npm start

start有向上查找  (require同理)

yarn使用

npm i -g yarn
yarn add xx
yarn add xx@x.x.x
yarn add xx --dev
yarn remove --dev
启动:yarn xx （一视同仁，不像npm,有些是要npm run xx)
yarn add -g xx
yarn global bin  //全局安装包的位置
yarn congfig get registry

写这篇博客，刚好是冬至，祝大家冬至快乐，生活和工作一切顺利。-12/21

后续有时间再补充完善、更新博客。