typescript+express的自学经历-附源码
typescript+express是在我感觉js维护难后发现可以使用ts来作为开发
那我就选择去学习ts,但是当我学完ts后发现ts+express的项目怎么创建是我最懵逼的
而网上的资源也不多, 可能用的人也不多吧
我就想要先发一篇这样的博客,让自己能够时刻记住也能让更多人看到吧.
首先准备下开发环境
查看nodejs版本号 ,我使用的是 v16.13.1
node -v
查看npm版本
npm -v安装过程就不说了吧,度娘一搜全都是
我没有像网上那样使用express-generator来创建项目,而是自己创建目录自己安装包
找个文件夹创建个目录
mkdir ts-expressemm... 我使用的ts,当初我学的时候ts+express一起出现的资料也是很少
进入到ts-express文件后开始初始化项目
npm init -y
这个 -y 就是帮你快速确定选项, 当然也可以把这个去掉自己选择和修改参数,这些参数后续z在package.json也是可以修改的
因为使用ts所以还得初始化ts的内容
检查下是否安装ts,如果没有在全局安装typescript
tsc -v安装完成后开始初始化ts项目
tsc --init这样我们就初始化完项目了,现在开始创建项目内文件
我一般是这样创建的
mkdir src // 代码目录
mkdir views // 视图目录 html ejs jade
mkdir public // 公共目录 js css img json
touch .env // 环境变量就不以一些出来了. 我把我的项目所有目录列一下吧
public
css
js
images
json
src
route
model
config
interface
enum
controller
utils
app.ts
views
index.ejs
.env创建完目录后我们开始安装需要用到的npm包
npm i express @types/express typescript pm2 ejs mongoose redis ts-node @types/mongoose cors @types/cors nodemon
通过@types来为包添加声明文件
包也安装好了, 有其他用到的包在自己装吧,
在src内部有个app.ts文件,这就是程序启动文件监听服务器
代码如下:
app.ts
import express from 'express';
import path from 'path';
import cors from 'cors';
const app: express.Application = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, '../public/')));
app.use(cors())
app.set("views", path.join(__dirname, "../views"));
app.set("view engine", "ejs");
app.listen(3000, () => {
console.log('ts-express启动成功 http://127.0.0.1:3000')
})运行代码,使用nodemon前提需要安装ts-node
nodemon ./src/app.ts至此在浏览器打开 http://127.0.0.1:3000 就可以看到
Cannot GET /这就已经建项完成了
之后的路由写法还是一样的
在route中创建路由文件index.route.ts 我习惯这样命名
index.route.ts
import express, { Request, Response } from 'express';
const indexRoute: express.Router = express.Router();
indexRoute.get('/', (req: Request, res: Response) => {
res.send('这是index.ts');
})
export default indexRoute;在app.ts中添加的内容
导入刚刚的index.ts 并使用
import indexRoute from './route';
// 添加到中间件
app.use('/', indexRoute);
之后所有的路由都可以这么创建
现在开始连接mongodb 数据库
这是个非关系型数据库连接也比较简单,就直接上代码吧
在utils中创建mongo.ts 随意在哪创建,项目目录里就行
mongo.ts
import mongoose from 'mongoose';
const DB_HOST = 'mongodb://127.0.0.1:27017/ts-express';
mongoose.connect(DB_HOST);
mongoose.connection.on('connected', () => {
console.log('连接成功mongodb')
});
mongoose.connection.on('error', function (err) {
console.log('Mongoose connection error: ' + err, '连接错误');
});
mongoose.connection.on('disconnected', function () {
console.log('Mongoose connection disconnected', '连接断开');
});这样mongo连接就完成了, 在app.ts中导入一下
import './utils/mongo';
保存后就可以成功连接了
连接成功后需要创建model
在model目录中创建index.model.ts
import mongoose from 'mongoose';
const Schema: typeof mongoose.Schema = mongoose.Schema;
const IndexSchema: mongoose.Schema = new Schema({
userId: { type: Number, desc: '这是字段描述,我是这么写的', index: true },
name: { type: String, desc: '这是字段描述,我是这么写的', index: true },
})
const Index = mongoose.model('Index', IndexSchema);
export default Index;模型完成后我们去插入一条数据
将刚刚index.route.ts文件修改为以下代码
import express, { Request, Response } from 'express';
import Index from '../model/index.model';
const indexRoute: express.Router = express.Router();
indexRoute.get('/', (req: Request, res: Response) => {
res.send('这是index.ts');
})
indexRoute.get('/create', async (req: Request, res: Response) => {
await Index.create({ userId: 1, name: 'test1' });
res.send({ code: 200, message: '插入成功' });
})
indexRoute.get('/delete', async (req: Request, res: Response) => {
await Index.deleteOne({ userId: 1 }); // 删除一条
await Index.deleteMany({ userId: 1 }); // 删除所有
res.send({ code: 200, message: '删除成功' });
})
indexRoute.get('/update', async (req: Request, res: Response) => {
await Index.updateOne({ userId: 1 }, { name: 'test' }); // 修改一条记录
await Index.updateMany({ userId: 1 }, { name: 'test' }); // 修改这个用户所有的name字段值
res.send({ code: 200, message: '修改成功' });
})
indexRoute.get('/find', async (req: Request, res: Response) => {
let data1 = await Index.find({ userId: 1 }) // 查询所有,返回的数组对象 [{}]
let data2 = await Index.findOne({ userId: 1 }); // 查询一条记录 返回的是对象 {}
res.send({ code: 200, message: '修改成功', data1, data2 });
})
export default indexRoute;
这就完成了增删改查,看完了还是简单的吧. 中间async await 可以去看下Promise 我当初也不会. 只能写回调地狱
下面是初始化的项目地址，可能跟博文不一样，博文是现写的
好了, 第一篇技术博客就到这里. 可能也写的不好吧.见谅咯~