VUE3+SPRINGBOOT+nginx+winserver2013

准备

jdk-20.0.1

nginx-1.24.0

前端部署

vue.config.js中修改为


module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  indexPath: "index.html",
  outputDir: "dist", //构建输出目录
  assetsDir: "static", //静态资源目录
  lintOnSave: false, //是否开启eslint保存检测
  parallel:false,
  runtimeCompiler: true,
  devServer: {
    host: "0.0.0.0",
    port: 8088,
    open: true, //vue项目启动时自动打开浏览器
    hot:false,
    proxy: {
      "/api": {
        //正则匹配到以这个开头的时候 就用代理 http://localhost:9003
        target: "http://localhost:9003", // 指向的是目标服务器
        changOrigin: true, //允许跨域
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
  },
};
npm run build

生成的dist文件夹放入nginx的HTML中。修改conf中nginx.conf文件。

 

 start nginx运行nginx。nginx -s stop停止nginx。

后端部署

github.com  在里面下载并放入新建文件夹中。

后端打包jar包并放入同一文件夹,新建相同名称的xml文件。

 

 当前目录下,打开命令行,输入  xxx.exe install

继续输入 net start

安装成功以后,打开任务管理器,选择“服务”,找到和你项目名同名的服务,启动该服务,到此你的后端就已经开始运行了。

Vue3 + SpringBoot + MyBatis Plus + JavaScript 是一种常用的全栈Web应用架构,用于构建高性能、模块化的前端界面。在登录页面的开发中,大致流程如下: 1. **Vue3**:作为前端框架,负责构建用户交互界面。你可以使用Vite或Webpack进行模块化管理,使用Vue Router处理路由跳转。创建组件`Login.vue`,其中包含用户名输入框、密码输入框、登录按钮等元素,并利用Vuex状态管理模式管理登录状态。 ```html <template> <div> <input v-model="username" placeholder="请输入用户名"> <input type="password" v-model="password" placeholder="请输入密码"> <button @click="login">登录</button> <p>{{ message }}</p> <!-- 显示错误信息 --> </div> </template> <script setup> import { ref } from 'vue'; import { useStore } from '@/store'; const username = ref(''); const password = ref(''); async function login() { try { const response = await axios.post('/api/login', { username: username.value, password: password.value }); // 登录成功处理... } catch (error) { if (error.response) { // 登录失败处理... store.commit('setErrorMessage', error.response.data.message); } } } </script> ``` 2. **SpringBoot**:后端提供API接口,如`/api/login`,使用MyBatis Plus简化数据库操作。在Controller层处理登录请求,验证用户名密码并返回认证结果。 3. **MyBatis Plus**:处理数据库的增删改查,包括对用户表的查询。通过Repository或者Service层封装SQL或Mapper,与数据库交互。 4. **JavaScript(axios)**:前端使用axios库发送异步HTTP请求到SpringBoot API,处理登录相关的网络通信。 在实际开发过程中,还需要注意响应式编程、错误处理、CSRF保护、跨域资源共享(CORS)等问题。完成登录功能后,可以考虑添加相关
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值