【全栈之路】保姆级node+vue从0到1极速搭建（一）-阿里云开发者社区

【全栈之路】保姆级node+vue从0到1极速搭建（一）

2023-01-14 360

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【全栈之路】保姆级node+vue从0到1极速搭建

前言：

本文分为三个部分，前端、后端、数据库。将使用node（express）搭建后端，使用vue作为前端，mysql作为数据库，从0到1的搭建一整个项目。本文目的是前后端数据交互，并对数据库进行常规的增删改查等操作。

通过这篇文章可以极其快速的了解前后端的操作，从而对全栈开发有所帮助。

1.前端项目的搭建

1.1 vue create xxx(项目名称)

1.2 cd进目录 npm run serve

以下是我随便写的demo文件（可以运行）

<template>
  <div id="app">
    <HelloWorld v-if="a" msg="Welcome to Your Vue.js App"/>
    <button class="con" @click="btn">查询数据</button>
    <button class="con" @click="btn2">添加数据</button>
    <button class="con" @click="btn3">删除数据</button>
    <div v-for="(item,index) in arr" :key="index" class="div">
      <span>我的名字是 ：{{item.name}}</span>
      <span style="margin:0 20px">我的密码是 ：{{item.pwd}}</span>
      <span>我的id是 ：{{item.id}}</span>
    </div>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      a: false,
      arr:[]
    }
  },
  methods: {
    btn() {
       //地址为后端地址，注意必须加上http：//不然报跨域错误
      axios.get('http://localhost:3000/front/getinfo').then((res)=>{
        this.arr = res.data.data
        console.log( res.data.data,'resssssss');
      })
    },
    btn2() {
      axios.get('http://localhost:3000/front/getadd').then((res)=>{
        this.arr = res.data.data
        console.log( res.data.data,'resssssss');
      })
    },
    btn3() {
      axios.get('http://localhost:3000/front/getdel').then((res)=>{
        this.arr = res.data.data
        console.log( res.data.data,'resssssss');
      })
    }
  },
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.con{
  width: 100px;
  height: 40px;
  background-color: skyblue;
  outline: 0 none;
  border:0;
  margin:0 20px;
  color: black;
  border-radius: 20px;
}
.div{
  width: 600px;
  height: 60px;
  line-height: 60px;
  background-color: #ccc;
  margin: 10px auto;
}
</style>