博客项目 laravel vue mysql 第一章 前后端环境配置

前言

该项目是laravel+vue的全栈项目。我也是边复习边写的。算是比较全面的练手案例吧。中间遇到什么问题大家可以评论留言。文档我用的markdown语法写的,排版啥的请大家见谅。还有前置知识,php基础,json,session,类和对象,pdo之类的我默认大家是已经学会了。我一个章节实现一个功能,包含前后端。
另外,我写的文章没有什么入门学习的，全是项目。所以适合的人群一般是基础学完想写项目的人群。

项目介绍

本博客系统是基于 Laravel 框架开发的现代化内容管理平台。系统采用前后端分离架构，后端提供强大且灵活的 API 支持，前端对接 Web、移动端等多种客户端。

技术栈

• 后端：Laravel 10+，PHP 8+
• 前端: vue
  目前一个章节一个功能,这张只是把前后端环境搭建一下

软件

composer
node
小皮面板
composer和node两个必备下载,小皮面板我是当数据库来用了。大家也可以自己下载mysql。
vscode
编辑器用的vscode,毕竟免费好用。这个大家自己选
加速器
这个看大家，composer速度和后面我用github仓库我要用到加速器。你们可以用镜像或者gitee之类的
OK,开始把
apifox
用来测试api和生成文档的

后端

环境搭建

composer创建项目

composer create-project laravel/laravel blog-api "8.*"

我的php版本是8.0,也懒的升级了,就指定版本了,你用的最新的话用下面这条命令

composer create-project --prefer-dist laravel/laravel 项目名称

后期要用的库,我都放在这了

PHP 图片处理库
composer require intervention/image

中文汉字转换为拼音的库
composer require "overtrue/pinyin:~4.0"

生成密钥,如果.env文件APP_KEY为空执行命令

php artisan key:generate

开启服务,这条命令自己背,以后都要用

php artisan serve

网页执行http://127.0.0.1:8000/,能看到欢迎页面就OK了。

写个测试接口,方便前端测试接口。routes/api.php

Route::get('/test', function () {
   
   
    return response()->json([
        'data' => [
            'name' => '四季豆',
            'url' => 'https://blog.youkuaiyun.com/php_ACDE?type=blog'
        ],
        'message' => 'hello world'
    ], 200);
});

我使用测试工具返回

{
   
   
    "data": {
   
   
        "name": "四季豆",
        "price": 10000,
        "description": "四季豆是一种非常健康的蔬菜，含有丰富的蛋白质和维生素，对人体非常有益。"
    },
    "message": "success"
}

前端

环境搭建

创建项目

npm create vite@latest blog-frontend

依赖

npm i axios echarts pinia vue-router element-plus @element-plus/icons-vue sass sass-loader

运行

npm run dev

网站输入http://localhost:5173/，返回欢迎页面就算OK了。

路由相关以及测试

创建src/router/index.js

import {
   
    createRouter, createWebHistory } from 'vue-router';

const routes = [
    // 前台
    {
   
    
        path: '/',