angularJS小记

最新推荐文章于 2018-09-06 15:14:10 发布

Domeansea

最新推荐文章于 2018-09-06 15:14:10 发布

阅读量309

点赞数

本文链接：https://blog.csdn.net/Domeansea/article/details/53888006

版权

<body style="padding: 10px;" ng-app="app">
<!-- 双向绑定  输入框输入button 会绑定到class属性为按钮样式 -->
<!-- 输入btn btn-primary 使得class变为button -->
   <div ng-controller="myCtrl">
   <input type="text" name="" ng-model="item1">
   <h1>{{item1}}</h1>
   <!-- ng-bind的作用跟{{}}作用一样 -->
   <div ng-bind="'ng-bind:'+item1"></div>
   <h1 ng-clock class="ng-clock">{{item1}}</h1>
   <div class="{{item1}}">按钮</div>
</div> 
<!--简单的前端验证登录弹窗-->
<div ng-controller="loginCtrl">
    <input type="text" name="" ng-model="user.name">
    <input type="text" name="" ng-model="user.pwd">
    <div class="btn btn-success" ng-click="login()">登录</div>
    <div ng-show="errormsg.length>0" class="alert-box">
        {{errormsg}}
    </div>
</div>
</body>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<body style="padding: 10px;" ng-app="app">
<div ng-controller="myctrl">
<h1>{{msg}}</h1>
<h2>{{realname}}</h2>
<h3>{{http}}</h3>
<h1>{{data.msg}}</h1>
<h1>{{username}}</h1>
</div>
</body>

对应的js内容

angular.module('app',[])
.config(function($httpProvider){
})
.value('realname','张小樊')
.value('realname','哈哈')
.constant('http','www.baidu.com')
.constant('http','www.sohu.com')
//value是可以改变的常量是不可改变的
.factory('data',function(){
return{
msg:'hello',
setMsg:function(){
this.msg="i am ok";
}
}
})
.service('USER',function(){
this.firstname="上官";
this.secendname="飞燕";
this.getName=function(){
return this.getName=this.firstname+this.secendname;
}
})
.controller('myctrl',function($scope,realname,http,data,USER){
$scope.msg="hello";
$scope.realname=realname;
$scope.http=http;
$scope.data=data;
data.setMsg();
$scope.username=USER.getName();
})

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

简单的jdbc mysql angular 设置登录修改

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="MyCtrl">
<h1>请设置：</h1>
姓名<input type="text" name="" ng-model='user.name'>
密码<input type="text" name="" ng-model='user.pwd'>
<button class="btn btn-success" ng-click="set()">设置</button>
<h1>请登录：</h1>
姓名<input type="text" name="" ng-model='loginUser.name1'>
密码<input type="text" name="" ng-model='loginUser.pwd1'>
<button class="btn btn-success" ng-click="login()">登录</button>
<h1>{{errormsg}}</h1>
<h1>修改：</h1>
姓名<input type="text" name="" ng-model='changes.name2'>
密码<input type="text" name="" ng-model='changes.pwd2'>
<button class="btn btn-success" ng-click="changes()">修改</button>
<h1>{{changeErrormsg}}</h1>
<h1>删除：</h1>
姓名<input type="text" name="" ng-model='delate.name3'>
密码<input type="text" name="" ng-model='delate.pwd3'>
<button class="btn btn-success" ng-click="delate()">删除</button>
<h1>{{deleteErrormsg}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</html>

JS实现

.controller('MyCtrl',function($scope,$http){
$scope.user={name:'',pwd:''};
$scope.loginUser={name1:'',pwd1:''};
$scope.changes={name2:'',pwd2:''};
$scope.delate={name3:'',pwd3:''};
$scope.set=function(){
console.log($scope.user);
var name= $scope.user.name;
var pwd= $scope.user.pwd;
$http.post("http://localhost:8000/test3/test?name="+name+"&pwd="+pwd).success(function(resp){
console.log(resp);
});
}
$scope.login=function(){
console.log($scope.loginUser);
var loginName=$scope.loginUser.name1;
var loginpwd=$scope.loginUser.pwd1;
$http.get("http://localhost:8000/test3/check?loginName="+loginName+"&loginpwd="+loginpwd).success(function(resp){

if(resp.result==1)
{
alert("登陆成功！");
}else{
$scope.errormsg="登陆名或密码错误！";
}

});
}
$scope.changes=function(){
console.log($scope.changes);
var changename=$scope.changes.name2;
var changepwd=$scope.changes.pwd2;
$http.post("http://localhost:8000/test3/change?changename="+changename+"&changepwd="+changepwd).success(function(resp){
if(resp.flag){
alert("修改成功");
}else{
$scope.changeErrormsg="该用户不存在，无法修改"
}
})
}
$scope.delate=function(){
console.log($scope.delate);
var loginName=$scope.delate.name3;
var loginpwd=$scope.delate.pwd3;
$http.get("http://localhost:8000/test3/delate?loginName="+loginName+"&loginpwd="+loginpwd).success(function(resp){

if(resp.result==1)
{
alert("删除成功！");
}else{
$scope.deleteErrormsg="该用户不存在或密码不正确";
}

});
}
})

后台代码

//先初始化链接数据库

public class JDBCTest {

public Connection getCon(){
try {
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=utf8";
String user="root";
String password="123456";
Connection conn = DriverManager.getConnection(url, user, password);
System.out.println(conn.getMetaData().getURL());

// PreparedStatement ps = conn.prepareStatement("");
// ps.executeUpdate();
return conn;
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
return null;
}
}
}

//设置用户名和密码进入数据库

public class Test extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
String pwd = req.getParameter("pwd");
try {
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=utf8";
String user="root";
String password="123456";
Connection conn = DriverManager.getConnection(url, user, password);
System.out.println(conn.getMetaData().getURL());

PreparedStatement ps = conn.prepareStatement("insert into t_user (name,pwd) values(?,?)");
ps.setString(1,name);
ps.setString(2,pwd);
ps.executeUpdate();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}

}

//web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>test3</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>test</servlet-name>
<servlet-class>com.base.Test</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test</servlet-name>
<url-pattern>/test</url-pattern>
</servlet-mapping>

<servlet>
<servlet-name>check</servlet-name>
<servlet-class>com.base.Check</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>check</servlet-name>
<url-pattern>/check</url-pattern>
</servlet-mapping>

<servlet>
<servlet-name>delate</servlet-name>
<servlet-class>com.base.Delete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>delate</servlet-name>
<url-pattern>/delate</url-pattern>
</servlet-mapping>

<servlet>
<servlet-name>change</servlet-name>
<servlet-class>com.base.Change</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>change</servlet-name>
<url-pattern>/change</url-pattern>
</servlet-mapping>

</web-app>

//用到的jar包

mysql-connector-java-5.1.40-bin.jar

json.jar

Domeansea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS小记

{{item1}} {{item1}} 按钮登录 0" class="alert-box"> {{errormsg}} ---------------------------------------------------------------------------------------
复制链接

扫一扫