博客项目 laravel vue mysql 第一章前后端环境配置_用laravel 和 vue搭一个前后端分离的项目-优快云博客

前言

该项目是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,开始把

后端

环境搭建

composer创建项目

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

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

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

生成密钥,如果.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);
});

前端

环境搭建

创建项目

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: '/', 
        name: 'Home',
        component: () => import('@/views/Home.vue'),
    },
]   

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

创建src/views/Home.vue

<script setup>

</script>

<template>
    <div>
        <h1>首页</h1>
    </div>
</template>

<style scoped>

</style>

修改App.vue

<script setup>

</script>

<template>
  <router-view />
</template>

<style scoped>

</style>

修改src/assets/base.scss 这里如果没有就创建,有的话就改后缀css为scss

// 基础样式重置
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

// 主体样式
body {
  min-height: 100vh;
  color: var(--color-text, #333); // 默认文本颜色
  background: var(--color-background, #fff); // 默认背景颜色
  transition: color 0.5s, background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: #333;
}

修改src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; 
import { createPinia } from 'pinia';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // 导入 Element Plus 的样式文件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'; // 导入 Element Plus 图标
import './assets/base.scss';

const app = createApp(App);

// 使用 Vue Router
app.use(router);

// 使用 Pinia 状态管理
const pinia = createPinia();
app.use(pinia);

// 使用 Element Plus
app.use(ElementPlus);

// 注册 Element Plus 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

app.mount('#app');

最后网站输入http://localhost:5173/，返回首页这阶段结束。(如果不成功,检查下你的vite配置)
这个是我的配置,你们可以参考

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

请求相关以及测试

新建.env文件

VITE_API_URL=http://127.0.0.1:8000

新建src/utils/request.js

import axios from "axios";

const apiClient = axios.create({
	baseURL: (import.meta.env.VITE_API_URL || 'http://localhost:8080') + '/api',
    timeOut: 5000,
    headers: {
        'Content-Type': 'application/json',
    },
})
apiClient.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token')
        if(token) {
            config.headers['Authorization'] = `Bearer ${token}`
        }
        return config
    },
    error => {
        return Promise.reject(error);
    }
)

apiClient.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    const response = error.response

    // 统一错误处理
  if (response) {
    const errorMessage = getErrorMessage(response.status, response.data?.message)
    console.error(errorMessage)
    
    // 401 未授权处理
    if (response.status === 401) {
      // router.push('/login')
    }
  } else {
    console.error('网络错误，请检查网络连接')
  }
  
  return Promise.reject(error)
  }
);

function getErrorMessage(status, defaultMessage) {
    const message = {
        400: '请求参数错误',
        401: '认证失败，请重新登录',
        403: '没有权限访问该资源',
        404: '请求资源不存在',
        500: '服务器内部错误',
        502: '网关错误',
        503: '服务不可用',
        504: '网关超时'
    }
    return messages[status] || defaultMessage || `请求错误: ${status}`
}

export default apiClient

新建src/api/front.js文件

import apiClient from "../utils/request";

const frontApi = {
    test() {
        return apiClient.get('/test')
    }
}

export default frontApi

修改views/Home.vue

<template>
    <div>
        <h1>Home</h1>
        <button @click="test">测试</button>
    </div>
</template>

<script setup>
import frontApi from '@/api/front';

const test = async () => {
    const response = await frontApi.test();
    console.log(response);
}

</script>

<style scoped>
</style>