全栈开发前后端项目初始化

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：1662

最近参加了一次全栈工程师的上机实践考试，电脑上只有开发语言环境，项目环境没有，因此项目初始化是个大问题。

全栈开发，前后端分离，因此前端和后端的项目都要初始化，项目基础框架可以使用npm和composer拉取到本地，主要是一些依赖包不太好弄，因为是上机操作，闭卷，所以比较头痛。在公司做项目，一般是在自己的一个架构的基础上直接开始二次开发，而不是在框架基础架构上开发，这方面和考试有很大区别。

下面分别说一下前端和后端项目怎么初始化环境，前端使用vue或者angular，后端使用php.

### 前端环境

初始化前端项目的环境前提是电脑上需要安装`nodejs`，前端主要解决路由、表单以及与后端接口通信的问题

#### angular项目初始化

- 安装`angular-cli`
```
npm install -g @angular/cli
```

- 安装项目基础框架，基础框架没有路由模块，因此需要添加路由选项，或者安装框架之后手动添加路由模块
```
# 路由模块初始化项目
ng new <project-name> --routing --defaults
# 单独添加路由模块
ng generate module app-routing --flat --module=app
```

- 添加新组件
```
ng generate component home
```

- 项目导入路由模块
```
# 导入路由模块
import { RouterModule, Routes } from '@angular/routing';
# 定义路由规则
const routes: Routes = [
	{
		path: '/home',
		component: HomeComponent,
	},
	{
		path: '',
		redirectTo: 'home',
		pathMatch: 'full',
	},
	{
		path: '**',
		component: HomeComponent,
	},
];
```

- 项目使用路由跳转
```
import { Router, ActivatedRoute } from '@angular/routing';
...
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
	// 获取参数
	this.activatedRoute.snapshot.params.id;
}
go() {
	// 路由跳转
	this.router.navigateByUrl('home');
}
...
// 根组件中使用路由组件
<router-outlet></router-outlet>
// 其他组件中使用路由跳转
<a [routerLink]="['/home']"></a>
```

- 项目中使用http与后台通信
```
import { HttpClient } from '@angular/common/http';
getData() {
	this.http.get(url, param).subscribe();
}
```

- 使用表单

```
import { FormsModule } from '@angular/forms';
```

```
<input id='username' name='username' type='text' [(ngModel)]='username' required minlength="2" #name="ngModel">
<div *ngIf="name.invalid && (name.dirty || name.touched)">
	<div *ngIf="name.errors?.required">required</div>
	<div *ngIf="name.errors?.minlength">minlegth</div>
</div>
```

#### vue项目初始化

- 安装vue脚手架
```
npm install -g vue-cli
```

- 安装项目初始框架
```
vue init webpack <project-name>
```

- 初始框架没有后端通信模块，手动安装通信模块
```
npm install vue-resource
```

- 项目导入通信模块
```
import { VueResource } from 'vue-resource';
Vue.use(VueResource);
```

- 项目中使用http与后台通信
```
this.$http.get(url, param).then();
```

- 项目中使用路由跳转
```
this.$router.push({ path: '/home', query: { id, }, });
```

- 项目中使用表单
```
<input type="text" v-model="username">
```

### 后端环境

初始化后端项目的环境前提是电脑上需要安装`composer`工具、`mysql`数据库和相应的开发语言，后端主要解决服务器配置以及与数据库通信的问题

#### php项目搭建

- 更改`apache`配置支持`php`环境
```
LoadModule php7_module '<php7apache2_4.dll>'
PHPIniDir '<php.init>'
AddType application/x-httpd-php .php .phtml
```

- 安装`thinkphp`框架
```
# 安装最新版本框架
composer create-project topthink/think <project-name>
# 安装5.0框架
composer create-project top-think/think=5.0.* <project-name> --prefer-dist
```

- 与`mysql`服务器通信，如果框架安装失败，那么需要完全手写代码以实现和服务器通信
```
/* 使用mysqli方式 */
// 连接数据库
$conn = mysqli_connect('localhost', 'username', 'password', 'dbname');
// 执行sql
$query = mysqli_query($conn, 'select * from tablename');
// 获取执行结果
$result = mysqli_fetch_array($query);
// 关闭连接
mysqli_close($conn);
/* 使用pdo方式 */
// 连接数据库
$conn = new PDO('mysql:host=localhost;dbname=<dbname>', 'username', 'password'); // 执行sql
$query = $conn->query('select * from tablename');
// 获取执行结果
$result = $query->fetchAll();
```

标签：全栈开发环境初始化

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：计算机原码，反码，补码以及十进制，二进制和十六进制转换

全栈开发前后端项目初始化

随便看看

留言