前后端分离实践AngularJS/ReactJS/VueJS组件化开发示例与对比(一)——前端后分离实践示例需求及后台搭建

一、写在前面

有一次在公司的一个技术分享会上,我讲到前后端分离对于前端从业者来说,如何用正确的姿势应对。其中讲到三个方面:一是使用框架;二是模块化项目;三是组件化开发。

这三个方面都是非常显而易见的,框架可以帮助前端开发人员快速构建功能强大的项目,模块化项目利于团队协作,组件化开发更是如今前端开发的必选途径,它提高代码利用和方便扩展等等。

对于前端框架,如今选择真的非常之多,Angular、React、backbone、Vue、ember等等。本文将选用Angular、React和Vue这三个非常热门的前端开发框架来实现一个网站的新闻模块。

 

二、项目需求

1、功能需求

  • 实现一个公司网站的构架
  • 实现网站的新闻模块功能:新闻列表和新闻内容显示
  • 实现网站的新闻搜索功能
  • 实现网站显示随机新闻功能

2、技术需求

  • 使用Angular、React和Vue三个前端框架构建三个功能相同,显示效果相同的网站框架,并完成其中的“新闻中心”模块
  • 使用Angular、React和Vue进行组件化开发,合理地将网站各页面各部分分解成独立组件模块

前后端分离实践AngularJS/ReactJS/VueJS组件化开发示例与对比

前后端分离实践AngularJS/ReactJS/VueJS组件化开发示例与对比

 

三、后台

1、后台架构:Slim PHP + MySQL

后台目录结构如下:

前后端分离实践AngularJS/ReactJS/VueJS组件化开发示例与对比

2、数据表结构

前后端分离实践AngularJS/ReactJS/VueJS组件化开发示例与对比

3、API接口

前后端分离实践AngularJS/ReactJS/VueJS组件化开发示例与对比

4、后台主要实现文件代码

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS");

use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require '../../vendor/autoload.php';
require '../common.php';
require '../db.php';

$app = new \Slim\App;

$app->get('/test', function($request, $response, $args){
	return $response->write("Hello, Slim!");
});

$app->get('/hello/{name}', function($request, $response, $args){
	return $response->write("Hello, ". $args['name']);
});

//////////////////////////////////////////////////////////////////

$app->get('/news', function($request, $response, $args){
	$db = new DBHandle();
	$page = $request->getQueryParam('page', $default = 1);
	$pagesize = $request->getQueryParam('pagesize', $default = 2);
	$news = $db->getNewsList($page, $pagesize);
	if(count($news)){
		return $response->withJson(formatOutput(true, $news, '请求成功'));
	}else{
		return $response->withJson(formatOutput(false, $news, '请求成功'));
	}
});

$app->get('/news/{id}', function($request, $response, $args){
	$id = $request->getAttribute('id');
	$db = new DBHandle();
	$news = $db->getNews($id);
	if($news){
		return $response->withJson(formatOutput(true, $news, '请求成功'));
	}else{
		return $response->withJson(formatOutput(false, $news, '请求成功'));
	}	
});

$app->post('/news', function($request, $response, $args){
	$body = $request->getParsedBody();
	$db = new DBHandle();
	$status = $db->createNews($body);
	if($status){
		return $response->withJson(formatOutput(true, $status, '新闻添加成功'));
	}else{
		return $response->withJson(formatOutput(false, $status, '新闻添加失败'));
	}
});

$app->get('/random/{num}', function($request, $response, $args){
	$num = $request->getAttribute('num');
	$db = new DBHandle();
	$news = $db->randomNews($num);
	if(count($news)){
		return $response->withJson(formatOutput(true, $news, '请求成功'));
	}else{
		return $response->withJson(formatOutput(false, $news, '请求成功'));
	}
});

$app->get('/search', function($request, $response, $args){
	$db = new DBHandle();
	$keyword = $request->getQueryParam('s', $default = '');
	$news = $db->search($keyword);
	if(count($news)){
		return $response->withJson(formatOutput(true, $news, '请求成功'));
	}else{
		return $response->withJson(formatOutput(false, $news, '请求成功'));
	}
});

$app->run();

 

<?php
header("Content-type:text/html;charset=utf-8");
//定义数据库连接信息常量
define('DB_HOST', "localhost");
define('DB_USER', "root");
define('DB_PWD', "");
define('DB_NAME', 'avrdb');


//数据库连接
global $conn;
function connect(){
	$conn = new mysqli(DB_HOST, DB_USER, DB_PWD, DB_NAME);
	if (mysqli_connect_errno()) {
        echo "数据库连接错误: " . mysqli_connect_error();
    }
    return $conn;
}

//数据库处理
class DBHandle{
	public $conn;
	function __construct(){
		$this->conn = connect();
	}

	public function getNewsList($page, $pagesize){
		// $sql = "SELECT * FROM news";
		$sql = "select * from news ORDER BY `id` DESC limit " . ($page-1)*$pagesize . ",". $pagesize;
		$rs = $this->conn->query($sql);
		$news = $rs->fetch_all(MYSQLI_ASSOC);
		return $news;
	}

	public function getNews($id){
		$sql = "SELECT * FROM news WHERE `id`='$id'";
		$rs = $this->conn->query($sql);
		$news = $rs->fetch_array(MYSQLI_ASSOC);
		return $news;
	}

	public function createNews($news){
		$sql = "insert into news(title, description, keyword, source, featured_img, author, content) VALUES('$news[title]','$news[description]','$news[keyword]','$news[source]','$news[featured_img]','$news[author]','$news[content]')";
		$rs = $this->conn->query($sql);
		$last_newsid = $this->conn->insert_id;
		if(!empty($last_newsid)){
			return $last_newsid;
		}else{
			return ;
		}
	}

	public function randomNews($num){
		$sql = "SELECT * FROM `news` WHERE id >= (SELECT FLOOR( MAX(id) * RAND()) FROM `news` ) ORDER BY id LIMIT " . $num;
		$rs = $this->conn->query($sql);
		$news = $rs->fetch_all(MYSQLI_ASSOC);
		return $news;
	}

	public function search($keyword){
		$sql = "SELECT * FROM news WHERE title LIKE '%".$keyword."%'";
		$rs = $this->conn->query($sql);
		$news = $rs->fetch_all(MYSQLI_ASSOC);
		return $news;
	}
}

 

<?php

function formatOutput($status, $data, $info){
	$output = array(
		"status" => $status,
		"data" => $data,
		"info" => $info
	);
	return $output;
}

 

四、三个框架使用的简单对比

框架

对比

Angular React Vue
定位 全功能型JS框架 UI视图框架 UI视图框架
大小
功能
扩展性 较强 较强
运行速度 一般 很快
维护性
重构难易 较简单 简单 简单
周边插件 很多 一般
社区 很完善 一般 不完善
学习成本 一般 较难 容易

 

 

那时那我

jinyunblogadmin

One thought to “前后端分离实践AngularJS/ReactJS/VueJS组件化开发示例与对比(一)——前端后分离实践示例需求及后台搭建”

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据