【在线OJ】01-Vue前端项目创建与页面开发

最新推荐文章于 2024-05-27 21:03:40 发布
最新推荐文章于 2024-05-27 21:03:40 发布
阅读量827 收藏 12
点赞数 7
分类专栏： 在线OJ项目 Java 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61903414/article/details/138455941
版权

目录

一、项目展示

二、项目创建

三、Vue语法

安装

基础请求

token

携带参数

配置中携带参数

请求体携带参数（默认json）

请求体携带参数（不使用json）

multipart格式（上传头像可）

代码

if-else

代码

for

代码

创建组件

导入组件

使用组件

代码

子组件

父组件

四、Element-UI

静态页面

事件绑定

代码

五、Router

六、VueX

七、开发

一、项目展示

二、项目创建

创建文件夹使用VsCode打开后，新建终端输入以下命令

打开UI创建项目

npm install -g @vue/cli # 安装vue
vue -ui # 在浏览器创建项目

UI创建步骤

配置端口与代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 9898,
    proxy: {
      '/api': {
        target: "http://localhost:9897",
        changeOrigin: true
      }
    }
  }
})

三、Vue语法

文本插值

<template>
  <div id="app">
    {{problems[0].id + problems[1].id}} {{problems[0].title}} {{problems[0].level}}
    {{problems[0].level === "easy" ? "easy" : "other"}}
  </div>
</template>

<script>
  const options = {
    data: function () {
      return {
        problems: [
          {id: 1, title: "两数之和1", level: "easy"},
          {id: 2, title: "两数之和2", level: "easy"},
          {id: 3, title: "两数之和3", level: "easy"}
        ]
      };
    }
  };
  export default options;
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

属性绑定

<template>
  <div id="app">
    <input type="text" v-bind:value="name">
    <input type="text" :value="name">
  </div>
</template>

<script>
  const options = {
    data: function () {
      return {
        name: "王五"
      };
    }
  };
  export default options;
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

事件绑定

<template>
  <div id="app">
    <input type="button" v-bind:value="msg" v-on:click="login">
      <input type="button" v-bind:value="msg" @click="login">
      </div>
</template>

<script>
  const options = {
    data: function () {
      return {
        msg: "点我"
      };
    },
    methods: {
      login: function () {
        alert(options.data().msg)
      }
    }
  };
  export default options;
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

案例加法器实现

<template>
  <div id="app">
    <input type="button" v-bind:value="addMessage" v-on:click="add">
      {{cnt}}
      <input type="button" v-bind:value="subMessage" @:click="sub">
      </div>
</template>

<script>
  const options = {
    data: function () {
      return {
        addMessage: "点我+1",
        subMessage: "点我-1",
        cnt: 1
      };
    },
    methods: {
      sub: function () {
        this.cnt = this.cnt - 1;
        alert(this.cnt);
      },

      add: function () {
        this.cnt = this.cnt + 1;
        alert(this.cnt);
      }
    }
  };
  export default options;
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

双向绑定

<template>
  <div id="app">
    <input type="text" v-model="name">
      {{name}}
    </div>
</template>

<script>
  const options = {
    data: function () {
      return {
        name: "王五"
      };
    },
    methods: {
    }
  };
  export default options;
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

axios

安装

npm install axios -S

基础请求

token

携带参数

配置中携带参数

请求体携带参数（默认json）

请求体携带参数（不使用json）

multipart格式（上传头像可）

代码
<template>
  <div id="app">
      <input type="button" value="简单get" @click="login">
    <input type="button" value="token" @click="token">
    <input type="button" value="查询字符串带参数" @click="params">
    <input type="button" value="配置携带参数" @click="configParams">
    <input type="button" value="请求体中的json格式" @click="bodyParams">
    <input type="button" value="请求体中的非json格式" @click="bodyParamsNoJson">
    <input type="button" value="使用multipart格式" @click="multipartParams">
    <input type="button" value="封装axios" @click="getAxios">
  </div>
</template>

<script>
import axios from "axios";
  const options = {
    data: function () {
      return {

      };
    },

    methods: {
      // 简单get
      login: async function () {
        const resp = await axios.get("http://localhost:8288/test/compile");
        alert(resp.data.data);
        localStorage.setItem("token", resp.data.data)
      },

      // 携带token
      token: async function () {
        const resp = await axios.post("http://localhost:8288/test/token", {}, {
          headers: {
            "token": localStorage.getItem("token")
          }
        })
        alert(resp.data.data);
      },

      // 携带参数在查询字符串中
      params: async function () {
        const name = encodeURIComponent("张三")
        const age = 12
        const resp = await axios.post(`http://localhost:8288/test/params?name=${name}&age=${age}`, {}, {})
        alert(resp.data.data);
      },

      // 携带参数在配置中
      configParams: async function () {
        const name = "张三"
        const age = 12
        const resp = await axios.post(`http://localhost:8288/test/params`, {}, {
          params:{
            name: name,
            age: age
          }
        })
        alert(resp.data.data);
      },

      // 请求体中传参,参数默认是json格式
      bodyParams: async function () {
        const name = "张三"
        const age = 12
        const resp = await axios.post(`http://localhost:8288/test/params`, {
          name: name,
          age: age
        }, {})
        alert(resp.data.data);
      },

      // 请求体中传参,不用json
      bodyParamsNoJson: async function () {
        const params = new URLSearchParams()
        params.append("name", "往往")
        params.append("age", 28)
        const resp = await axios.post(`http://localhost:8288/test/params`, params, {})
        alert(resp.data.data);
      },

      // 使用multipart格式---上传头像
      multipartParams: async function () {
        const params = new FormData()
        params.append("name", "lisi")
        params.append("age", 11)
        const resp = await axios.post(`http://localhost:8288/test/params`, params, {})
        alert(resp.data.data);
      },

      // 封装axios--不可用
      getAxios: async function () {
        const _axios = axios.create({
          baseURL: "http://localhost:8288",
          withCredentials: true,   // 允许携带token
        })
        const params = new URLSearchParams()
        params.append("name", "往往")
        params.append("age", 28)
        const resp = await _axios.post(`/test/paramsToken`, params, {
          headers: {
            "token":"111"
          }
        })
        alert(resp.data.data);
      },
    },

    computed: {

    }
  };
  export default options;
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

响应数据

条件渲染

if-else

代码
<template>
  <div id="app">
    <div v-if="problems.length > 0">显示数据</div>
    <div v-else>不显示</div>
  </div>
</template>

<script>
const options = {
  data: function () {
    return {
      problems: [
        {id: 1, title: "A+B1", level: "easy"},
        {id: 2, title: "A+B2", level: "easy"},
        {id: 3, title: "A+B3", level: "easy"},
        {id: 4, title: "A+B4", level: "easy"},
      ]
    };
  },

  methods: {

  },

  computed: {

  }
};
export default options;
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

列表渲染

for

代码
<template>
  <div id="app">
    <div v-if="problems.length > 0">
      <div class="row" v-for="problem of problems" :key="problem.id">
        <span>{{problem.id}} </span>
        <span>{{problem.title}} </span>
        <span>{{problem.level}} </span>
      </div>
    </div>
    <div v-else>不显示</div>
  </div>
</template>

<script>
const options = {
  data: function () {
    return {
      problems: [
        {id: 1, title: "A+B1", level: "easy"},
        {id: 2, title: "A+B2", level: "easy"},
        {id: 3, title: "A+B3", level: "easy"},
        {id: 4, title: "A+B4", level: "easy"},
      ]
    };
  },

  methods: {

  },

  computed: {

  }
};
export default options;
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

页面加载就执行方法

组件复用

创建组件

导入组件

使用组件

代码
<template>
  <div id="app">
    <my-button></my-button>
  </div>
</template>

<script>
  import MyButton from '@/components/ExamplyView.vue'
  const options = {
    data: function () {
      return {

      };
    },

    components: {
      MyButton,
    },

    mounted() {  // 组件加载就执行

    },

    methods: {

    },

    computed: {

    }
  };
  export default options;
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

组件插槽

自定义化组件

类似于参数传参

子组件

父组件

四、Element-UI

安装ElementUI

npm install element-ui -S

引入ElementUI

import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import Element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'

  Vue.use(Element)
  Vue.config.productionTip = false

  new Vue({
  router,
  store,
  render: h => h(App)
    }).$mount('#app')

表格

<template>
  <div id="app">
    <el-table :data="problems">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="题目" prop="title"></el-table-column>
      <el-table-column label="难点" prop="level"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import MyButton from '@/components/ExamplyView.vue'
  const options = {
    data: function () {
      return {
        problems: [
          {id: 1, title: "A+B1", level: "easy"},
          {id: 2, title: "A+B2", level: "easy"},
          {id: 3, title: "A+B3", level: "easy"},
          {id: 4, title: "A+B4", level: "easy"},
        ]
      };
    },

    components: {
      MyButton,
    },

    mounted() {  // 组件加载就执行

    },

    methods: {

    },

    computed: {

    }
  };
  export default options;
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

分页

静态页面

事件绑定

代码
<template>
  <div id="app">
    <el-table :data="problems">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="题目" prop="title"></el-table-column>
      <el-table-column label="难点" prop="level"></el-table-column>
    </el-table>
    <el-pagination
      :total="problems.length"
      :page-size="pageSize"
      :current-page="currentPage"
      layout="prev, pager, sizes, next, ->, total"
      :page-sizes="pageSizes"
      @current-change="currentChange"
      @size-change="sizeChange">
    </el-pagination>
  </div>
</template>

<script>
  import MyButton from '@/components/ExamplyView.vue'
  const options = {
    data: function () {
      return {
        problems: [
          {id: 1, title: "A+B1", level: "easy"},
          {id: 2, title: "A+B2", level: "easy"},
          {id: 3, title: "A+B3", level: "easy"},
          {id: 4, title: "A+B4", level: "easy"},
          {id: 5, title: "A+B4", level: "easy"},
          {id: 6, title: "A+B4", level: "easy"},
          {id: 7, title: "A+B4", level: "easy"},
        ],
        pageSize: 2,
        currentPage: 1,
        pageSizes: [2, 4]
      };
    },

    components: {
      MyButton,
    },

    mounted() {  // 组件加载就执行

    },

    methods: {
      currentChange: function (page) {
        // 页面改变 发起请求获取分页数据
        this.currentPage = page;
        alert(page + ":" + this.pageSize)
      },
      sizeChange: function(size) {
        // 页面展示数据条数改变 发起请求获取数据
        this.pageSize = size;
        alert(this.currentPage + ":" + size)
      }
    },

    computed: {

    }
  };
  export default options;
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

表格+分页+搜索小demo

<template>
  <div id="app">
    <el-input size="mini" placeholder="请输入题目" style="width: 300px;" v-model="queryVo.title" clearable></el-input>
    <el-select placeholder="选择题号" size="mini" style="margin-left: 20px" v-model="queryVo.ids" clearable>
      <div v-for="problem in problems" :key="problem.id">
        <el-option :value="problem.id"></el-option>
      </div>
    </el-select>
    <el-button size="mini" type="primary" style="margin-left: 20px" @click="query">提交</el-button>
    <el-divider></el-divider>
    <el-table :data="problems">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="题目" prop="title"></el-table-column>
      <el-table-column label="难点" prop="level"></el-table-column>
    </el-table>
    <el-pagination
      :total="problems.length"
      :page-size="pageSize"
      :current-page="currentPage"
      layout="prev, pager, sizes, next, ->, total"
      :page-sizes="pageSizes"
      @current-change="currentChange"
      @size-change="sizeChange">
    </el-pagination>
  </div>
</template>

<script>
  import MyButton from '@/components/ExamplyView.vue'
  const options = {
    data: function () {
      return {
        queryVo: {
          title: "",
          ids: []
        },
        problems: [
          {id: 1, title: "A+B1", level: "easy"},
          {id: 2, title: "A+B2", level: "easy"},
          {id: 3, title: "A+B3", level: "easy"},
          {id: 4, title: "A+B4", level: "easy"},
          {id: 5, title: "A+B4", level: "easy"},
          {id: 6, title: "A+B4", level: "easy"},
          {id: 7, title: "A+B4", level: "easy"},
        ],
        pageSize: 2,
        currentPage: 1,
        pageSizes: [2, 4]
      };
    },

    components: {
      MyButton,
    },

    mounted() {  // 组件加载就执行

    },

    methods: {
      currentChange: function (page) {
        // 页面改变 发起请求获取分页数据
        this.currentPage = page;
        alert(page + ":" + this.pageSize)
      },
      sizeChange: function(size) {
        // 页面展示数据条数改变 发起请求获取数据
        this.pageSize = size;
        alert(this.currentPage + ":" + size)
      },
      query: function () {
        // 根据条件进行查询
        alert(this.queryVo.title + ":" + this.queryVo.ids)
      }
    },

    computed: {

    }
  };
  export default options;
</script>

<style>
  .input1 {
    width: 50px;
  }

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

级联选择器

五、Router

路由配置

路由跳转

<router-link to="target"></router-link> // 页面
this.$router.push(url)  // js

导航栏案例

六、VueX

vuex

没用到

七、开发

1886i
关注
专栏目录
基于SpringBoot+SpringCloud+Vue的在线代码评委系统(OJ)源码+数据库+项目说明.zip
01-09
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 基于SpringBoot+SpringCloud+Vue的在线代码评委系统(OJ)源码+数据库+项目说明.zip # README-CN # OJ系统 开始开发 ## 环境准备 ​ 运行此程序必须要有**Ubuntu**系统， ​ Linux 内核版本 >= 3.10 ​ jdk1.8版本， ​ mysql8.0， ​ redis。 ### go-judge系统运行 **gojudge所需要的端口是5050** <a href="">go_judge手册</a>. 在Docker上运行 ~~~bash docker run -it --rm --privileged --shm-size=256m -p 5050:5050 criyle/executorserver ~~~ #### c/c++语言环境测试 **接下来我们打开postman进行测试已post形式发送请求http://IP:5050/run携带参数** ~~~java { "cmd": [{ "args": ["/usr/bin/g++", "Main.cc", "-o", "a"], "env": ["PATH=/usr/bin:/bin"], "files": [{ "content": "" }, { "name": "stdout", "max": 10240 }, { "name": "stderr", "max": 10240 }], "cpuLimit": 10000000000, "memoryLimit": 104857600, "procLimit": 50, "copyIn": { "Main.cc": { "content": "#include <iostream>\nusing namespace std;\nint main() {\nint a, b;\ncin >> a >> b;\ncout << a + b << endl;\n}" } }, "copyOut": ["stdout", "stderr"], "copyOutCached": ["Main.cc", "a"], "copyOutDir": "1" }] } ~~~ **我们服务器会给我们返回** ~~~bash [ { "status": "Accepted", "exitStatus": 0, "time": 726910000, "memory": 55812096, "runTime": 787566071, "files": { "stderr": "", "stdout": "" }, "fileIds": { "Main.cc": "4EK46KIB", "a": "LR567VHA" } } ] ~~~ **接下来我们根据Main的Id对他进行run** ~~~bash { "cmd": [{ "args": ["a"], "env": ["PATH=/usr/bin:/bin"], "files": [{ "content": "1 1" }, { "name": "stdout", "max": 10240 }, { "name": "stderr", "max": 10240 }], "cpuLimit": 10000000000, "memoryLimit": 104857600, "procLimit": 50, "strictMemoryLi
vue搭建简易前端
最新发布
m0_71733565的博客
08-28 577
前文初步了解了组件库Element Plus，现在正式开始使用vue搭建大事件前端页面，后端见（springboot以及后续项目专栏）
手把手教你搭建vue-cli前端页面【超详细教程】
xinin919的博客
06-23 3790
前端运行环境Node.js、npm工具、vue-cli脚手架项目、路由组件、ElementUI框架、Hbuilder
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
m0_67844671的博客
09-28 2万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
Vue 前端开发
weixin_41299062的博客
03-14 3984
Vue前端开发基础
前端vue 教程（详细版）
it_varlue的博客
04-04 4736
vue基础知识.vue生命周期.vue动画使用.vue路由配置和懒加载.vuex的使用.vue的插件库.
前端项目-oj.JSFiddle.zip
09-02
【标题】"前端项目-oj.JSFiddle.zip" 指的是一个与前端开发相关的项目，其中包含了名为 "oj.JSFiddle" 的插件或工具。这个项目可能用于在线编程练习平台（Online Judge，简称OJ）的开发，因为JSFiddle是一个在线的...
前端项目-oj.VimeoVideo.zip
09-03
【前端项目-oj.VimeoVideo.zip】是一个专为在线编程挑战平台（OJ）设计的Vimeo视频插件。这个项目旨在帮助用户在平台上嵌入Vimeo视频，以辅助教学或展示代码执行过程。让我们深入了解一下这个前端项目的具体实现、...
前端项目-oj.YouTubeVideo.zip
09-03
【标题】"前端项目-oj.YouTubeVideo.zip" 指的是一个专为在线判题系统（Online Judge，简称OJ）开发的前端插件，用于集成YouTube视频播放功能。这个压缩包包含了该项目的主要源代码和其他相关资源。 【描述】"前端...
OJ在线判题系统 - Vue 3 + Arcodesign + Springboot的 全栈项目，实现 在线做题，判题的功能
05-19
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
前端项目-oj.markdown.zip
09-02
这个插件是为了解决在前端开发过程中，特别是在在线编程评测（Online Judge, OJ）系统中，如何优雅地展示和处理Markdown格式的题目描述和答案。以下是对这个项目的详细解析： **Markdown** Markdown是一种轻量级的...
Vue的使用 -- 基于Vue搭建前端页面
十七的博客
07-07 6546
Vue的使用 -- 基于Vue搭建前端页面
Element-UI布局（左右上下布局）
热门推荐
明耀的博客
02-26 2万+
&lt;style&gt; .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } #div_main { background-color: aqua; } &lt;/style&gt; &lt;template&gt; ...
【Vue+element-ui搭建前端页面】适用于初学者学习
一学就会小小王的博客
11-03 1万+
到这儿我们就学习到怎么用Vue和Element搭建前端界面，并且了解了一些前端向后端发送接收请求需要的技术，希望大家看到这会有所收获！t=M85B组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/quickstart。
前端开发：Vue框架与前端部署
qq_50086023的博客
02-17 2671
前端开发：Vue框架与前端部署
Vue2电商前台项目（二）：完成Home首页模块业务
weixin_42044763的博客
09-09 1万+
1、actions执行的时候，要通过api里面的接口函数调用，向服务器发请求，获取服务器的数据，需要把之前的api引入进来，在这里发请求就是要调用这个reqCategoryList函数，如果请求成功（code===200），那么把数据交给mutations进行处理。防抖：前面的所有的触发都被取消，最后一次执行在规定的事件之后才会触发，也就是说如果连续的快速触发，只会执行一次 ----------------------当事件被触发后，延迟 n 秒后再执行回调，返回的是一个函数。
循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理(1)
2301_79098879的博客
04-10 839
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。帮助，可以扫码获取！！（备注：前端）**
vue前端一个简单的静态页面
2303_76992412的博客
05-27 3981
Vue.js是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue的设计注重灵活性和“可以被逐步集成”的特点，可以用于构建简单的静态页面到复杂的单页应用程序。Vue的核心功能包括声明式渲染和响应性，它能够自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。此外，Vue支持单文件组件，允许开发者将组件的逻辑、模板和样式封装在同一个文件中，便于管理和复用。
SpringCloud与Vue构建的在线测评平台OJ系统
"hoj-master.zip"是一个提供了前后端分离架构的在线评测平台项目，该平台依托于SpringBoot以及SpringCloud技术框架，前端使用Vue.js进行开发，从而确保了系统的高可用性和扩展性。同时，该项目具备ACM竞赛编程的实际...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1886i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值