后端如何搞定前端代码

在下uptown
980 阅读3分钟

前言

作为一个练习时长四年多的Javaboy，无论是接私活还是做开源，都避免不了给后端代码披上一层前端的皮。要是不给自己留一手看家的前端本事，真要接了私活岂不是还得操心把前端的工作分出去。这篇盘一下作为一个后端怎么搞定前端代码。

前后端不分离：JQuery + layui

别管页面画的丑不丑，起码得会发请求到后端，举一个最简单的例子，点击提交把输入框的数据提交给后端接口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
</head>
<body>
    <textarea name="nextIndex" id="nextIndex" cols="22" rows="20"></textarea>
    <textarea name="desc" id="desc" cols="22" rows="20"></textarea>
    <input type="button" onclick="go()" value="提交">
</body>
<script>
    function go() {
        var textareaContents = $('#desc').val();
        console.log(textareaContents)
        $.ajax({
            url:"/changeOrder",
            type:"post",
            data:textareaContents,//第一个textareaContents值文本框的Id，用jquery方式的AJAX提交，这个Id必须要
            dataType:"json",
            headers:{'Content-Type': 'application/json'},
            success:function(res){
                console(123)
                console.log(res)
                alert(res)
            },
            complete: function (xhr) {
                // 不管是成功还是失败都是完成，都会执行这个 complete 函数
                console.log('complete', xhr)
                alert(xhr.responseText)
            }
        })
    }
</script>
</html>

我个人还是非常喜欢这个写法，看起来很整洁，按照上面的例子即可把数据提交到接口。

layui.mnorg.cn/

image.png

layui像是当年的诺基亚一样，没有做错啥就被吞没在时代的洪流里。到现在我接私活第一个想到的就是用layui去画页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="../static/layui/layui.js"></script>
</head>
<body class="layui-layout-body" style="overflow: hidden">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">test</div>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul 78
                class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item"><a href="/static/test4.html" target="myFrame">菜单1</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body" >
        <!-- 内容主体区域 -->
        <iframe  frameborder="0" height="100%" width="100%" name="myFrame">

        </iframe>
    </div>
</div>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>

layui.js的路径一换放到resource里效果就是这样，丑归丑，但是做一些后台控制的小页面贼好用，比如查看队列阻塞情况了，清楚缓存开关等等等。

image.png

部署起来也非常丝滑，资源直接被打到jar包中不需要借用外部组件再去代理。

前后端分离：vue + AntDesignUI

由于前端技术发展迅速，工程化愈发成熟，代码变庞大后无法再与后端代码耦合一起。所以逐渐从耦合后端的结构中脱离出独立的前端服务，也就是在调试开发的阶段。

前端代码启动后会用node占用一个端口启动一个web服务，用户通过访问前端项目的端口访问前端页面，请求通过配置proxy地址转发到后端服务中。VUE是目前最流行的国产前端框架之一，具有组件化开发、双向数据绑定等特性。

具体牛逼在哪我也不知道，总之大家都在用。。。。

如何启动

首先需要有包管理工具，npm | yarn，拿到一个前端项目先试用npm install下载依赖包。就像SpringBoot框架启动一样，启动一个SpringBoot应用步骤大致如下：

  1. 用@SpringBootApplication声明一个启动类；
  2. 在启动类中调用SpringApplication.run()方法来启动应用。

与之相类似，前端使用vue大致逻辑也是如此，入口是new一个Vue实例。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
 
<body>
   
    <div id="app">
        <!-- 表达式 -->
        <h1>{{message}}</h1>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 创建Vue的实例
        new Vue({
            // 绑定id为app的元素
            el: "#app",
            // 数据
            data: {
                message: "hello Vue!"
            }
        })
    </script>
</body>
 
</html>

先来看一下项目结构，前端项目里的大部分文件对一个陌生的后端程序员来说都不是那么重要，我们在开发调试的时候只需要关注几个地方即可。

首先修改后端转发地址，打开vue.config.js文件修改proxy.target地址，这里填对应的后端服务地址。

修改左侧菜单配置src/config/router.config.js，path为前端页面的路由，component里配置对应的页面路径。

部署时也很简单，vue文件最终会被打包成js、css、html文件，正式环境里通常都会配合nginx路由转发到前端资源即可。

avatar
文章
阅读
粉丝