Element-UI + Vue.js + SpringBoot 實現前後端分離入門項目

前端部分源碼：https://github.com/szluyu99/elementui-users_1
後端部分源碼：

項目簡介與演示

Element-UI + Vue.js + SpringBoot 實現的前後端分離入門項目。

刷新頁面時讓組件默認爲當前路由路徑

activeIndex 表示當前激活的頁面，如果寫死了刷新後會有 bug，因此動態獲取當前路由路徑。

data() {
  return {
    activeIndex: this.$route.path,
  };
},

刪除時確認

注意 @onConfirm 這個事件是加載 el-popconfirm 標籤上的。

<el-popconfirm title="這是一段內容確定刪除嗎？" @onConfirm="handleDelete(scope.$index, scope.row)">
	<el-button slot="reference" size="mini" type="danger">刪除</el-button>
</el-popconfirm>

<script>
  export default {
    data() {},
    methods: {
      handleDelete(index, row) {
        console.log(index, row);
        this.$http.get("http://localhost:8989/user/delete?id=" + row.id).then((res) => {
          if (res.data.state) {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'success'
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error'
            });
          }
        });
        this.findAllTableData();
      },
    },
  }
</script>

分頁功能的實現

mysql 分頁查詢：

<!--分頁查詢-->
<select id="findByPage" resultType="User">
    SELECT id, name, bir, sex, address
    FROM t_user
    LIMIT #{start}, #{rows}
</select>

後端控制器：

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {

    @Autowired
    private UserService userService;
	
	// 分頁查詢	
	@GetMapping("/findByPage")
	public Map<String, Object> findByPage(Integer pageNow, Integer pageSize) {
	    Map<String, Object> result = new HashMap<>();
	    pageNow = pageNow == null ? 1 : pageNow; // 不傳當前頁數默認爲1
	    pageSize = pageSize == null ? 4 : pageSize; // 不傳當前頁面顯示條數默認顯示4條
	    List<User> users = userService.findByPage(pageNow, pageSize); // 分頁查詢
	    Long totals = userService.findTotals();
	    result.put("users", users);
	    result.put("total", totals);
	    return result;
	}

}

前端頁面：使用 分頁組件；

<el-row>
  <el-col :span="12" :offset="8">
    <div>
      <!-- 分頁組件 -->
      <el-pagination 
        style="margin: 15px 0px;" 
        prev-text="上一頁" next-text="下一頁" background
        layout="prev, pager, next, sizes, jumper, total"
        :page-sizes="[2,4,6,8,10]" 
        :page-size="pageSize"
        :total="total"   
        :current-page="pageNow"   
        @current-change="findPage"
        @size-change="findSize">
      </el-pagination>
    </div>
  </el-col>
</el-row>

<script>
  export default {
    data() {
      return {
        total: 0, // 總頁數, 從後臺查詢獲取
        pageNow: 1, // 當前頁數, 默認爲1
        pageSize: 4 // 當前頁顯示的數據條數, 默認爲4
      }
    },
    methods: {
      findPage(page) { // 用來處理分頁相關方法
        console.log("當前頁數: " + page);
        this.pageNow = page;
        this.findAllTableDataByPage();
      },
      findSize(size) { // 用來處理每頁顯示記錄發生變化的方法
        console.log("當前頁面記錄條數: " + size);
        this.pageSize = size;
        this.findAllTableDataByPage();
      },
      findAllTableDataByPage() {
        this.$http.get("http://localhost:8989/user/findByPage?pageNow=" + this.pageNow + "&pageSize=" + this.pageSize).then((res) => {
          // console.log(res.data);
          this.tableData = res.data.users;
          this.total = res.data.total;
        });
      }
    },
    created() {
      this.findAllTableDataByPage();
    }
  }
</script>

el-date-picke 日期少一天

Element-UI 中時間控件的默認時間爲 國際標準時間，因此與北京時間差 8 個小時。

解決方案：在標籤中增加屬性 value-format="yyyy-MM-dd"，然後 刷新頁面；

<el-date-picker 
	type="date" 
	placeholder="選擇日期" 
	v-model="form.bir" 
	value-format="yyyy-MM-dd">
</el-date-picker>