创建一个基本的anjularjs项目

VIEW层：indexHtml.html

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>SQL</title>
    <!-- 引入angular的js -->
    <script type="text/javascript" src="../js/lib/angular.min.js"></script>
    <script type="text/javascript" src="../js/base.js"></script>
    <script type="text/javascript" src="../js/controller/indexController.js"></script>
    <script type="text/javascript" src="../js/service/indexService.js"></script>
</head>
<body class="findsql" ng-app="myApp"  ng-controller="indexController">
<div class="total">
    <div class="admin" >
        <label>数据库用户:</label>
        <select ng-model="id">
            <option value="">---管理员---</option>
            <option value="1">*****</option>
            <option value="2">*****</option>
            <option value="3">*****</option>
        </select>
    </div>
    <br>
    <div class="inputSQL">
        <label style="align-self: auto">SQL:</label>
        <textarea ng-model="sql" placeholder="请输入SQL语句" style="width:600px;height:40px;"></textarea>
        <button ng-click="findsql()">查询</button>
    </div>
</div><br>
<div>
    <label>结果:</label>
        {{list}}
</div>
</body>

base.js:用于定义模块,方便划分$scope域

/**
 * Created by User on 2018/7/23.
 */
var app = angular.module("myApp",[]);

控制层:indexController.js,用于进行业务逻辑判断,并调用服务层

/**
 * Created by User on 2018/7/23.
 */
app.controller('indexController' ,function($scope,indexService ){
    $scope.findsql=function (){
        if($scope.id=="" || $scope.id==null){
            alert("请选择数据库用户");
            return;
        }
        if($scope.sql=="" || $scope.sql==null){
            alert("请输入SQL语句");
            return;
        }
        indexService.findsql($scope.sql,$scope.id).success(function (response) {
            $scope.list=response;
        });
    }
});

服务层:indexService.js,用于获取接口数据

/**
 * Created by User on 2018/7/23.
 */
app.service('indexService',function ($http) {
    this.findsql=function (sql,id) {
        return $http.get('http://localhost:************+id+'?sql='+sql);
    }
});

创建一个基本的anjularjs项目

猜你喜欢